화면에 보이는 요소들은 display 속성을 통해 어떻게 보여지며 다른 요소들과 함께 배치되는지가 결정이 됩니다. display에는 다양한 속성이 존재하지만 가장 기본이 되는 3가지를 살펴보도록 하겠습니다.

block

display 속성이 block으로 지정되어 있는 요소(태그)는 전후 줄바꿈을 하게되며 한 줄에 하나의 요소만을 가지게 됩니다.

<div>block</div>
<div>block1</div>
<div>block2</div>

가장 많이 쓰이는 태그 중 하나인 div는 display: block 속성을 기본값으로 가지고 있습니다.
div는 전후 줄바꿈이 있기 때문에 위의 경우 총 3줄이 출력되게 됩니다.
또한 block 은 width, height, margin, padding 속성이 모두 반영이 됩니다.

inline

display 속성이 inline으로 지정되어 있는 요소(태그)는 전후 줄바꿈이 없으며 한 줄에 그대로 이어지게 됩니다. 오른쪽 벽에 닿게 되면 가로스크롤이 생기며 계속해서 추가가 됩니다.

위의 block 예시에서 display: inline 속성만을 추가했을 뿐인데 많은 것들이 변했습니다.
하나씩 살펴보면 inline 속성을 사용할 시 width와 height 속성을 지정해도 무시된다는 것을 볼 수 있습니다.
왜냐하면 이 속성은 해당 태그가 가지고 있는 컨텐트의 크기만큼의 공간을 차지하도록 되어있기 때문입니다. 여기서는 block1이라는 텍스트가 차지하는 공간이겠네요.
또한 margin과 padding 속성은 좌우간격만 반영이 되고, 상하 간격은 반영되지 않습니다.
그런데 padding 의 경우 위쪽은 반영이 안되고 아래쪽만 반영된 거 같은 모습을 볼 수 있는데 그 이유는 시각적인 반영만을 하기 때문입니다. 실제 차지하는 공간은 없기 때문에 위에만 잘린 것과 같은 모습을 보이고 있습니다.

inline-block

display 속성이 inline-block으로 지정되어 있는 경우에는 inline 과 같이 줄바꿈 없이 한 줄에 나란히 배치된다는 점에서는 같지만, inline 에서 불가능했던 width, height, margin, padding 속성의 간격을 지정할 수 있게 됩니다.

마지막으로 display 속성에서 block 과 inline을 기본값으로 가지고 있는 태그들을 살펴보고 마치도록 하겠습니다. 태그를 잘못사용 시 원하는 이상한 결과가 나올 수 있기 때문에 태그가 가지고 있는 기본 속성들은 알아두면 좋을 것 같네요.

block 태그

<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, 

<header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, 

<ol>, <video>

inline 태그

<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, 

<small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>