inline, inline-block, block

display: inline

대표적으로 이라는 태그의 성질로 content/text 크기만큼만 점유하고
동일 라인에 붙는 성질

width/height 적용 불가
margin/padding-top/bottom 적용 불가
line-height 원하는 대로 적용 불가(span에 적용안되고 감싸고 있는 div 전체 크기에만 영향 등)

display: block;

block는 무조건 한줄을 점유하고, 다음 요소들은 다음으로 (밑으로) 넘어간다.

display: inline-block;

inline과 block의 혼합....
display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치
하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해집니다.

대표적인 inline-block 엘리먼트로 button이나 input, select 태그 등을 들 수 있다.