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

display 속성은 요소가 차지하는 영역에 관한 정보를 나타냅니다.

각 속성에 따라 서로 다른 요소들이 배치되는 모습이 달라집니다.

 

이 글을 통해 각 속성의 특징과 대표적인 태그 예시들을 알아봅니다.

또한 inline-block이 inline과 block의 어떤 특징을 갖고 있는지도 알아봅니다.

 

이를 토대로 요소들을 원하는 모습으로 배치할 수 있는 것을 목표로 합니다.

---

1. block

display: block

 

특징

• 항상 줄바꿈이 발생합니다.
• 가로폭(width)은 화면 전체를 차지합니다. → width: 100%
• width, height, margin, padding 속성을 지정할 수 있습니다.
• block 요소 안에는 inline 요소를 포함할 수 있습니다.
• 대표적인 block 요소 → <div>, <h1>, <p>, <li>

---

2. inline

display: inline

 

특징

• 줄바꿈 없이 다른 요소들과 한 줄에 배치될 수 있습니다.
• width, height를 지정할 수 없습니다.
  • inline 요소는 content의 너비만큼 가로폭을 차지합니다.
  • margin, padding은 좌우만 지정이 가능하고 상하는 지정할 수 없습니다.
• inline 요소 안에는 block 요소를 포함할 수 없습니다.
• 대표적인 inline 요소 → <span>, <a>, <img>, <input>, <button>

---

3. inline-block

display: inline-block

 

특징

inline-block 요소는 다음과 같은 inline과 block의 특징이 결합되어 있습니다.

• (inline) 줄바꿈 없이 다른 요소들과 한 줄에 배치될 수 있습니다.
• (inline) content의 너비만큼 가로폭을 차지합니다.
• (block) width, height, margin, padding 속성을 지정할 수 있습니다.