display:inline-block

http://blog.naver.com/ssunxf?Redirect=Log&logNo=120136619769

보통 메뉴를 마크업 할 땐 li로 나열, float를 줘서 일렬로 늘어트린 후 감싸고 있는 상위 엘르멘트에다 width를 지정하고 margin으로

중앙에 위치시크는 기법이 많이 사용된다. 그런데 메뉴가 더 추가 되거나 삭제되면 전체 가로 너비를 다시 지정해줘야 하는 문제가 발생하는데, 이런 단점을 보완한 기법이 있는데 바로 dispaly:inline과 display:inline-block에 그 해법이 있다.

<ul style="list-style:none; margin:0; padding:0; text-align:center;">

<li style="display:inline;"><a style="display:inline-block;padding:10px;">홈</a></li>

</ul>

text-align:center; 로 inline 속성을 갖게 된 li를 중앙 정렬하되 중요한 것은,

li에다 display:inline;을 , a에는 display:inline-block;을 지정.

일반적으로 그냥 li에 display:inline-block;을 지정해 줄 수도 있지만, IE6-7에선 inline-block을 inline elements에 지정했을 때만

제대로 인식하기 때문에 a elements에 지정하였다.

참고

* inline-block

: block 속성을 가진 태그에 외부 태그와의 상효작용은 inline 으로 동작하도록 함.

즉, div 에 이 속성을 걸면 margin 등을 정하면서도 표시되는 건 inline 처럼 작동함.

* div가 줄바꿈되는 이유는 css display 속성 기본값이 block이고,

span이 줄바꿈이되지 않는 이유는 css display 속성 기본 값이 inline이기 때문이다.

이 두가지 속성 설정을 반대로 했을경우 차이점

1. block으로 설정하면 줄바꿈디고, inline으로 설정하면 줄바꿈이 되지 않는다.

2. block으로 설정하면 상/하 margin과 padding은 사용 할 수 있지만,

inline으로 설정하면 상/하 margin과 padding은 사용할 수 없다.

3. block으로 설정하면 width, height 속성을 사용 할 수 있지만. inline으로 설정하면 widht, height 속성을 사용 살 수 없다.