[CSS] display 속성 정리 (block, inline, inline-block)

 

 

display 속성은 웹페이지를 보고 있는 사용자에게 특정 요소(element)를 어떻게 보여줄지를 결정한다.

 

display 속성은 매우 다양한 값을 가질 수 있지만, 가장 기본이 되는 block, inline, inline-block 을 비교해보자.

 

 

 

---

 

- block

• display가 block으로 설정된 요소는 페이지에서 한 줄을 차지하거나, 부모 요소의 100%를 차지한다.

• 따라서 다음 태그는 그 다음 줄에 배치가 된다.

• 또한 가로(width)와 세로(height) 크기를 지정할 수 있다.

• 대표적으로 <div>, <h1>, <p>, <header> 태그가 block을 기본값으로 갖는다.

 

- inline

• display가 inline으로 설정된 요소는 태그안의 centent의 크기만큼을 차지한다.

• 이어서 오는 태그가 block이 아닐 경우에, 개행되지 않고 inline으로 설정된 태그와 같은 줄에 위치하게 된다.

• block과는 다르게 가로(width)와 세로(height) 크기를 지정할 수 없다.

• 대표적으로 <span>, <img>, <a> 태그가 있다.

 

- inline-block

• inline-block은 이름에서도 알 수 있듯이 inline 속성과 block 속성을 둘 다 가지고 있다.

• inline 처럼 다른 요소와 같은 줄에 배치되면서도

• block 처럼 가로(width)와 세로(height) 크기를 지정할 수 있다는 장점이 있다.

 

 

** 각각의 태그에는 기본적으로 설정된 display 속성값이 있지만, css에서 이 설정을 변경할 수도 있다.

 

---

 

 

예시)

 

- HTML

<div class="block">block</div>
<span class="inline">inline</span>
<div class="inline-block">inline-block</div>
<span class="span-block">span이지만 block</span>

 

- CSS

.block {
  background-color: yellow;
  /* width: 100px; */
  height: 100px;
  margin: 10px;
  padding: 10px;
}

.inline {
  background-color: green;
  color: white;
  width: 100px;
  height: 100px; /* 설정이 적용되지 않음 */
  margin: 10px;  /* 설정이 적용되지 않음 */
  padding: 10px;
}

.inline-block {
  background-color: orange;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
}

.span-block {
  display: block;
  background-color: red;
  color: white;
  height: 100px;
  margin: 10px;
  padding: 10px;
}

 

- 결과