display - inline, block, inline-block
> display 속성
웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정한다
inline
display 속성이 inline으로 지정된 엘리먼트는 줄바꿈 없이 한 줄에 다른 엘리먼트와 나란히 배치된다.
사용 시 주의할 점은 width와 height 속성을 지정해도 무시되며,
margin과 padding 속성은 좌우 간격만 반영되고 상하 간격은 반영되지 않는다.
대표적인 inline 엘리먼트 - span, a, em 등..
block
block으로 지정된 엘리먼트는 inline과 다르게 width, height, margin, padding 속성이 모두 반영된다.
inline-block
외부적으로는 inline 엘리먼트, 내부적으로는 block 엘리먼트의 규칙을 따른다.
즉, inline 엘리먼트처럼 전 후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만,
block 엘리먼트처럼 width, height, margin, padding 속성 모두 지정 가능하다.
대표적인 inline-block 엘리먼트 - button, input, select 등...
:)