css | 마진 여백 사용시 %넓이 깨지는 경우와 width100%밀림 깨짐 해결하기

키워드 : css 마진 여백, 넓이 100% 깨짐, 100%밀림 증상, 100%넓이, width 100%

무료아이콘 전체게시물 작성일18-08-17 14:03 조회313회

본문

마진 여백 사용시 %넓이 깨지는 경우와 width100%밀림 깨짐 해결하기 

 

width100%인 상태에서는 보이지 않는 여백때문에 밀리거나 깨지는데 

이때 상위 div에 font-size:0; line-height:0; 을 주고 보이지 않는 여백을 없애고

하위 div에 위의 항목을 재설정 해 줌

 

넓이가 100%인 div에서 padding, boder 값을 줄 경우 box-sizing:border-box;를 사용하면

div 깨짐 증상을 해결할 수 있지만

 

margin을 줄 경우엔 div 깨지거나 밀림 증상이 나타남

 

예로 4개의 li에 각 넓이를 25%씩 한 상태

한 줄로 표현되게 하기 위해 display:inline-block; 적용

 

css

ul.wrap {

width:100%; 

/*넓이100%를 주고, li넓이가 25%, 4개일 경우 딱 100%가 되는데

눈에 보이지 않는 여백으로 밀리거나 깨지는데 그걸 해소하기 위해 보이지 않는 여백을 없애줌

*/

font-size:0;

line-height:0;

 

}

ul.wrap li{

width:25%;

padding:10px;

display: inline-block;

 

/*위에 ul css에서 보이지 않는 여백을 없애주기 위해

font-size를 0으로 했기 때문에 li항목에 글자 크기를 재설정 해줘야함

안 그러면 글자가 보여지지 않음, line-height역시...*/

font-size:15px; 

line-height:normal;

/*padding,border값을 넓이%에 포함되게*/

box-sizing: border-box; 

-ms-box-sizing: border-box; 

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box; 

/*구분을 두기 위한 무시*/

background-color:#ccc; 

border-right:1px solid #242424;

}

 

html

<ul class="wrap">

<li>1. 25%</li>

<li>2. 25%</li>

<li>3. 25%</li>

<li>4. 25%</li>

 

</ul>

 

위의 방식으로 했을 경우

아래와 같이 깨지거나 밀리지 않음,

 

f2c3518537e8d8d7adb3fc46ec24798a_1534481
 

다만 margin을 좌우로 줬을 경우엔 밀리거나 깨져버림

box-sizing: border-box;은 테두리와 패딩만 포함되기 하기 때문이죠

 

css

ul.wrap li{

width:25%;

      margin-right:10px; 

padding:10px;

display: inline-block;

 

/*위에 ul css에서 보이지 않는 여백을 없애주기 위해

font-size를 0으로 했기 때문에 li항목에 글자 크기를 재설정 해줘야함

안 그러면 글자가 보여지지 않음, line-height역시...*/

font-size:15px; 

line-height:normal;

/*padding,border값을 넓이%에 포함되게*/

box-sizing: border-box; 

-ms-box-sizing: border-box; 

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box; 

/*구분을 두기 위한 무시*/

background-color:#ccc; 

border-right:1px solid #242424;

}

 

margin-right:10px; 마진을 주면 

총 넓이가 100%에 각 4개 넓이가 25%인데 마진이 10px를 주면

100%에서 30px 더해져서 100%가 넘게 되니 당연히 밀리거나 깨지겠죠

 

f2c3518537e8d8d7adb3fc46ec24798a_1534481
 

이걸 해결 하는 방법이 width:calc(넓이 - 마진);

width를 25%를 주는게 아니라 calc를 주고 뺄 마진을 넣어줍니다.

width: calc (25% - 10px);

 

넓이 25%에서 10px만큼 마진을 준다라는 의미인데요

(말자도 ㅋㅋ적용하면서  - -;; 이해하는대로 적고 있는중이라 ㄷㄷㄷ)

 

최종 적용

 

css

ul.wrap li{

width: calc(25% - 10px);

margin-right:10px;

padding:10px;

display: inline-block;

/*위에 ul css에서 보이지 않는 여백을 없애주기 위해

font-size를 0으로 했기 때문에 li항목에 글자 크기를 재설정 해줘야함

안 그러면 글자가 보여지지 않음, line-height역시...*/

font-size:15px; 

line-height:normal;

/*padding,border값을 넓이%에 포함되게*/

box-sizing: border-box; 

-ms-box-sizing: border-box; 

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box; 

/*구분을 두기 위한*/

background-color:#ccc; 

border-right:1px solid #242424;

 

}

 

아래와 같이 두둥 마진값을 줬는데도

밀리거나 깨짐이 없네요 > ,. <

 

f2c3518537e8d8d7adb3fc46ec24798a_1534482
 

 

비회원도 추천 가능합니다.
유익한 정보였다면, 추천해주세요

추천 1 비추천 0

Css + Html

113개의 게시물
목록
읽기: 1P (1lv), 쓰기: 100P (3lv), 덧글: 10P (2lv), 다운: -10P (2lv)
Css + Html 목록
번호 제목 아이디 날짜 조회수 추천
113 부트스트랩 부트스트랩 모달 (modal) 클릭시 오른쪽에 생기는 여백 17px없애기 무료아이콘 전체게시물 10-12 64 추천: 1
112 css 에어콘 출판사 메인 콘텐츠 레이아웃 관련링크 무료아이콘 전체게시물 09-13 75 추천: 1
111 css float 중앙 정렬 시키기 무료아이콘 전체게시물 09-11 107 추천: 1
110 css 모바일에서 입력창 input 클릭시 확대되는 거 막기 관련링크 무료아이콘 전체게시물 09-04 94 추천: 1
109 jQuery/java 다양한 사이드바 소스 사이드바 플러그인 관련링크 무료아이콘 전체게시물 09-02 91 추천: 1
108 css 크롬 노란 input 배경 없애기 무료아이콘 전체게시물 08-27 134 추천: 1
107 css input에 입력폼에 글자 미리 넣어두기 무료아이콘 전체게시물 08-25 93 추천: 1
열람 css 마진 여백 사용시 %넓이 깨지는 경우와 width100%밀림 깨짐 해결하기 무료아이콘 전체게시물 08-17 314 추천: 1
105 etc 브라우저 별 CSS 핵 관련링크 무료아이콘 전체게시물 08-09 113 추천: 1
104 css 목록(리스트)형식의 css에 텍스트 블릿 사용하기 무료아이콘 전체게시물 08-08 77 추천: 1
103 css 넓이 100%에 25%씩 4개값을 줬는데 줄바꿈 되는 경우 ㅠㅠ 댓글1 무료아이콘 전체게시물 07-17 171 추천: 1
102 부트스트랩 동영상 슬라이드 댓글2 관련링크 무료아이콘 전체게시물 01-20 1411 추천: 16
101 부트스트랩 다중,멀티 스타일시트 우선순위 무료아이콘 전체게시물 01-19 1665 추천: 15
100 부트스트랩 부트스트랩 nav 높이를 높였을 때 다른 div 와 겹치는 현상 무료아이콘 전체게시물 01-17 1049 추천: 14
99 부트스트랩 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 관련링크 무료아이콘 전체게시물 01-17 4158 추천: 15
게시물 검색