CSS의 display 속성 : inline, block, inline-block 차이점?

display: inline;

줄바꿈 없이 문장의 흐름에 따라 한 줄에 배치됩니다. 
inline 엘리먼트로 <span>이나 <a>, <em> 태그 등이 있습니다.
태그의 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문에 width와 height를 지정할 수 없습니다
margin과 padding의 상하 여백은 적용되지만 좌우 여백은 적용되지 않습니다.

---

display: inline-block;

inline-block 요소는 inline과 block 요소의 중간 형태입니다
block요소 처럼 width와 height, padding, margin 등의 속성을 설정할 수 있으며
inline요소 처럼 줄바꿈 없이 문장의 흐름에 따라 한 줄에 배치됩니다. 

---

display: block;

block 요소는 항상 새로운 줄에서 시작하며, 가능한 가로 전체 너비를 차지합니다.
대표적인 block 앨리먼트로는 <div>, <p>, <h1> 등이 있습니다.
inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 설정할 수 있습니다.