CSS display 속성과 block, inline, inline-block, none

display 속성

display 속성은 레이아웃 정의에 자주 사용되는 중요한 속성이다. 속성의 값으로 다음과 같은 키워드가 있다.

• block → block 특성을 가지고 요소(block 레벨 요소)로 지정한다.
• inline → inline 특성을 가지는 요소(inline 레벨 요소)로 지정한다.
• inline-block → inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정한다.
• none → 해당 요소를 화면에 표시하지 않는다. 차지하는 공간도 사라진다.

block 레벨 요소

block 특성을 가지는 요소는 아래와 같은 특징을 지닌다.

• 항상 새로운 라인에서 시작한다.
• 화면 크기 전체의 가로폭을 차지한다. (width: 100%)
• width, height, margin, padding 속성 지정이 가능하다.
• block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다.
• block 레벨 요소 예시
  • div
  • h1, ... h6
  • p
  • ol, ul, li
  • hr
  • table
  • form

inline 레벨 요소

inline 특성을 가지는 요소는 아래와 같은 특징을 지닌다.

• 새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있다. 즉, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.
• content의 너비만큼 가로폭을 차지한다.
• width, height, margin-top, margin-bottom 속성을 지정할 수 없다. 상, 하 여백은 line-height로 지정한다.
• inline 레벨 요소 뒤에 공백(엔터, 스페이스 등)d이 있는 경우, 정의하지 않은 space(4px)가 자동 지정된다.
• inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없다. inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용된다.
• inline 레벨 요소 예시
  • span
  • a
  • strong
  • img
  • br
  • input
  • select
  • textarea
  • button

inline-block 레벨 요소

block과 inline 레벨 요소의 특징을 모두 갖는다. inline 레벨 요소와 같이 한 줄에 표현되면서 width, height, margin 프로퍼티를 모두 지정할 수 있다.

• 기본적으로 inline 레벨 요소와 흡사하게 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있다.
• block 레벨 요소처럼 width, height, margin, padding 속성을 모두 정의할 수 있다. 상, 하 여백을 margin과 line-height 두 가지 속성을 통해 제어할 수 있다.
• content의 너비만큼 가로폭을 차지한다.
• inline-block 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정된다.

---

참고 및 출처

• https://poiemaweb.com/css3-display#1-display-프로퍼티