[CSS] display 속성

inline: 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치.

-> inline 엘리먼트: <span>, <a>, <em>

-> width, height 속성은 무시

-> 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문, ?

-> margin, padding 속성을 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않음.

 

block: 전후 줄바꿈이 일어나 혼자 한 줄을 차지

-> block 엘리먼트: <div>, <p>, <h1>

-> width, height, margin, padding 속성이 모두 반영이 됨.

 

inline-block: 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됨. (inline)

-> inline-block 엘리먼트: <button>, <select> 

-> 명시적으로 display: inline-block 으로 지정해줘야 함.