Display

요소를 어떻게 보여줄 지 결정하기 위한 속성이다.

block

• 가장 기본적인 값 중에 하나이다.
• block은 h1~h6, p, div, header 같은 태그들이 기본적으로 가진 값을 말한다.

p { display: block; }

inline

• 가장 기본적인 값 중에 하나이다.
• inline은 span, a, img 같은 태그들이 기본적으로 가진 값을 말한다.

p { dispaly: inline; }

inline-block

• inline과 block 둘의 속성을 합친 값이다.
• width, height / margin, padding을 지정할 수 있고, 지정해주지 않으면 inline처럼 값이 적용된다.
• vertical-align 속성을 사용할 수 있어서 수직 정렬에 사용이 가능하다. (top, middle, bottom)
• inline 때문에 특유의 공백 발생. 대략 4px 정도

p { display: inline-block; }

none

• 내가 원하는 요소를 아예 숨길 수 있다.