Display 속성 -inline, block, inline-block

display는 화면이 표시될때 특정 영역이 표시 되는데 성질을 부여하는 속성이다. 즉, 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정한다. 

 

1_ inline

display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. 

대표적으로 <span>이나 <a><em>태그 등이 있다. 

이 inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시가 된다는 것이다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문이다. 또한, margin과 padding속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.

 

2_ block

block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다. 예를들어, <div>나 <p><h1>을 들 수 있다. 

block엘리먼트는 inline과는 다르게, width, height, margin, padding속성이 모두 반영된다. 

 

3_ inline -block

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

대표적으로 <button>이나 <select>태그 등을 들 수 있다. 

 

4_ none

박스가 생성되지 않고 공간조차 차지하지 않는다.