display:inline-block;

SS로 Layout을 잡을 때 inline element 사이에 block element를 넣고 싶을 때가 있습니다.

하지만 div같은 block element를 사이에 넣는다면 새로 줄바꿈이 되어 element들이 포지셔닝하게 됩니다.

기본적으로 inline element가 block element를 포함할 수 도 없습니다.

그럴 때 inline-block display 속성을 사용한다면 원하는 방식으로 동작시킬 수 있을 것입니다.

inline-block 속성은 매우 유용한 속성임에도 불구하고 자주 사용되지 않고 있습니다.

IE7/FF2 등의 몇몇 브라우저에서 inline-block 속성이 구현되어 있지 않기 때문이죠.

하지만 핵을 사용해서 구현하는 방법이 있네요. 

아래는 관련 글입니다.

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

IE에서는 아래처럼 IE 6/7 용 스타핵을 사용해서 inline 요소로 지정하고 IE전용속성 zoom:1을 지정하면

inline-block element처럼 동작한다고 합니다.

zoom:1; *display:inline

FF2에서는 아래처럼

display: -moz-inline-stack 

속성을 지정하면 inline-block처럼 동작한다고 합니다.

그리고 vertical-align 속성으로 세로정렬 해주는 것도 잊지 말아야 겠네요.

브라우저마다 조금 다르게 나오네요.

좋네요.

출처 : http://dancer.tistory.com/126