2013/12/09

display: inline-block 으로 폭(width)을 딱 맞췄는데도 여백(margin)이 더 생기는 현상 // CSS

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. 해결 방법

.container {
  font-size: 0px;
  letter-spacing: 0px;
  word-spacing: 0px;
}

.container > div {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  font-size: 15px;
  letter-spacing: 1em;
  word-spacing: 2em;
}

이러한 여백을 없애려면 감싸고 있는 div에 font-size, letter-spacing, word-spacing을 0px로 줄인 다음, 안쪽의 div에서 다시 값을 살려주는 식으로 지정하는 방법을 쓰면 된다고 합니다.

4. 간단 해법

하지만, 위와 같은 방식으로 컨트롤 하는 것은 너무 번거로워서

저는 float:left 속성으로 그냥 붙여버렸습니다. ㅋ


진리의 stackoverflow.com 에 오늘도 감사.



참고: http://stackoverflow.com/questions/1833734/display-inline-block-extra-margin

댓글 4개:

  1. 우와..정말 고맙습니다!! 말끔하게 해결됐네요! 시간 아끼게해줘서 고마워요 ㅜㅜ

    답글삭제
    답글
    1. 도움이 되셨다니 다행입니다. ^^

      삭제
  2. 와 저도 삽질 하고 있었는데 감사합니다!!

    답글삭제