display 속성

none : 보이지 않음

요소를 렌더링하지 않도록 설정함

영역도 차지하지 않음

 

block : 블록 박스

div 태그, p 태그, h 태그#, li 태그 등이 해당됨

가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보임

width, height 속성을 지정할 수 있음

block 요소 뒤에 등장하는 태그가 이전 block 요소 오른쪽에 배치될 수 있어도

항상 다음 줄에 렌더링

 

inline : 인라인 박스

span 태그, b 태그, i 태그, a 태그 등이 해당됨

block과 달리 줄바꿈이 되지 않음.

width, height 를 지정할 수 없음

 

inline-block : block과 inline의 중간 형태

block과 inline의 중간 형태

줄 바꿈이 되지 않지만, 크기를 지정할 수 있음