inline-block 요소에 관한 고찰

비록 IE 6,7의 득세(?)로 인하여 display:inline-block을 사용 할 일은 많지 않지만,

native style이 인라인 블럭인 요소를 다루며 겪었을 몇가지 이슈를 소개하고자 한다.

(img, input 등이 있다.)

인라인 블럭 요소라 하면,

글자 그대로, 인라인 요소의 특성과 블럭 요소의 특성을 합쳐 놓은 요소라 할 수 있다.

다시말해서,

블럭 요소의 '면적 가질수 있는 것과 마진 패딩 등의 특성'과

인라인 요소의 줄바꿈 되지 않고 텍스트 처럼 취급 특성 (엄밀히 말하면 텍스트도 인라인이다. 요소가 아닐뿐..)

을 가진 요소가 인라인-블럭 요소라고 볼 수 있다.

근데 이 인라인 블럭을 다루다 보면 겪는 문제가 있다.

위 네모 박스들은  50X50의 인라인 블럭(span) 요소들이다.

분명히 마진, 패딩에 0을 주었는데 위와 같이 간격이 벌어진다.

무슨 짓을 해도 소용 없다.

우연히 부모 요소에 font-size:0을 주니 붙는다. 왜 이러한 현상이 발생할까?

십중 팔구 다음과 같이 마크업 되어 있을 것이다.

--------------------

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

-----------------

그렇다! 저 공백은 '엔터 한칸' 때문에 발생하는, inline-block은 텍스트 이기 때문에, 스페이스를 무시하지 못해서

발생하는 문제인 것이다. 스페이스 한칸은 font-size에 비례해서 나타나기 때문에,

font-size가 0이라면 스페이스도 0 처리되어 공백이 사라졌던 것이다.

여러가지 해결 방법이 있겠지만, 굳이 들여쓰기를 해야한다면 다음과 같이 코딩 하는 방법도 있다.

-------------

<span></span

><span></span

><span></span

><span></span

><span></span

><span></span> 

-------------

그러나 필자라면..그냥 다 붙여서 쓰고만다.