display: inline-block 여백이 생기는 현상

1. 문제 발생 (예제)

1000px 로 설정한 div를

다시 150px, 700px, 150px 로 나누고

안쪽의 div에는 display: inline-block 속성을 주었는데

맨 오른쪽 div 영역이 아래쪽으로 밀려내려감

*** div의 padding과 margin, border는 모두 0px 이었음

 

2. 원인

<div> 태그 등으로 다른 태그들을 묶어주는 경우,

div 태그 또한 inline-element로 인식을 하기 때문에

div들끼리 마주하는 부분에서 여백이 생김

div 뿐만아니라, span도 마찬가지

 

3. 해결 방법

1)

.container { // 부모 랩퍼

...

font-size: 0px;

letter-spacing: 0px;

word-spacing: 0px;

}

 

.container > div { // 간격이생기던 엘리먼트

...

font-size: 15px;

letter-spacing: 1em;

word-spacing: 2em;

}

 

감싸고 있는 div에 font-size, letter-spacing, word-spacing을 0px로 줄임 ->

안쪽의 div에서 복구.

 

2)

.container > div { // 간격이생기던 엘리먼트

...

float:left;

}

참고

http://comajava.blogspot.kr/2013/12/display-inline-block-width-margin-css.html