[CSS] 블럭 요소 vs 인라인 요소 vs 인라인블럭 요소

 

 

블럭 요소 vs  인라인 요소 vs 인라인블럭 요소

 

 

 

 

 

 

블럭요소 (block element)

• 태그가 좌우공간을 다 차지하는 요소
• 기본 너비값이 100% ☞ 각 요소가 수직으로 쌓인다.
• 너비값( width), 높이값(height) ⭕
• 상하좌우 마진, 패딩 모두 ⭕
• 내부에 블럭요소와 인라인요소를 포함 가능⭕

<div>  <table>  <h1~6>  <p>  <form>  <ul>  <ol>  <li>  <dl>  <dt>  <dd>

 

 

 

 

 

인라인요소 (inline element) 

• 태그가 실제로 코딩된 그 영역만 차지하는 요소
• 기본 너비값 == 컨텐츠 너비값
• 나란히 위치 가능 ⭕
• 너비값( width), 높이값(height) ❌
• 위아래 마진 ❌ (좌우 마진, 상하좌우 패딩은 ⭕)
• 내부에 블럭요소 포함 불가능 ❌

<span>  <a>  <br>  <em>  <strong>  <input>  <label>  <img>

 

 

 

 

 

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

• 수평으로 배치⭕ + 크기값 & 상하좌우 마진⭕
• 기본 너비값 == 컨텐츠 너비값

 

 

 

⭐ 어떤 요소든 position: absolute / position: fixed가 적용되면 인라인 블록 요소로 변한다⭐ 

 

 

 

---

 

 

출처

 

스마트디자인 서포트

 

 

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