[CSS 기초] 블록 요소(block element) vs 인라인 요소(inline element) vs 인라인 블록 요소 (inline-block element)

 

HTML의 요소는 블록 요소와 인라인 요소, 인라인블록 요소로 분류된다.

 

블록 요소 (block element) 

 

• 기본 너비값이 100% (폼 엘리먼트 제외)
• 너비값이 100%를 차지하기 때문에 각 요소가 수직으로 쌓인다.
• 너비값, 높이값 (width, height)을 가질 수 있다.
• 상하좌우 마진, 패딩 모두 가질 수 있다.

💡 <블록 요소 태그>

div, p, h1-h6, ul, ol, blockquote, form, table, figure...

 

 

인라인 요소 (inline element)

 

• 컨텐츠 너비값이 기본 너비값이 된다.
• 요소들이 수평으로 쌓인다.
• 너비값, 높이값을 가질 수 없다. (폼 엘리먼트 제외)
• 상하 마진을 가질 수 없다. (좌우 마진, 상하좌우 패딩은 가능)

block은 inline을 포괄하는 더 큰 개념이므로 HTML을 마크업 할 때 inline 태그 안에 block 태그를 넣지 않도록 주의

 

💡 <인라인 요소 태그>

span,  label, a, small, em, b, br, audio, video, s, u, mark, q, strong, sup, sub....
::before, ::after는 기본적으로 인라인 요소.

 

 

인라인 블록 요소 (inline-block element)

 

인라인 요소의 특징과 블록 요소의 특징이 합쳐진 요소.

인라인 요소 처럼 수평으로 배치할 수 있고 블록 요소처럼 크기값과 상하좌우 마진을 가질 수 있다.

 

• inline 요소의 특징과 block 요소의 특징을 합한 것.
• 컨텐츠 너비값이 기본 너비값. (inline 성질)
• 너비값 높이값 가질 수 있음 (block 성질)
• 상하좌우 마진, 패딩 모두 가질 수 있음 (block 성질)

+ 어떤 요소든 position: absolute 또는 position: fixed가 적용되면 인라인 블록 요소로 변한다.

 

💡 <인라인 블록 요소 태그>

img, input, button, fontawesome icon