display 속성

display는 요소를 block과 inline 중에서 어느 쪽으로 처리할 지를 결정하는 CSS 속성

inline

개행(줄바꿈)을 하지 않고 여러 요소가 한 줄에 표현되는 것을 말한다.

span, a, img 태그 등이 inline 요소에 속하며, inline은 해당 content가 차지하는 만큼의 공간만 갖는다.

block

display 속성이 block으로 설정된 요소의 같은 라인에는 어떠한 다른 요소도 함께 있을 수 없다. 다른 요소의 접근을 막는(block) 속성이다. div, h1~h6, p 태그 등이 속하며, 한 줄 전체를 점유한다.

inline-block

inline과 block의 속성을 합친 속성이다. inline과 같이 한 줄로 요소를 나열할 수 있으며, 동시에 block처럼 크기와 위치를 조정할 수 있다.

inline-block 적용 시에 요소 간의 공백이 발생하는데 이는 상위 태그(div)를 {font-size:0} 로 적용하면 공백을 없앨 수 있다. 상하 높이의 차이는 {vertical-align: top;} 등의 방법을 통해 해결할 수 있다.