[HTML/CSS] 인라인 요소와 블록 요소

과제를 수행 중, label 태그에 상하 여백을 넣으려는데 margin이 적용되지 않았다.
머리 싸매다 질문 드리니 label 태그가 인라인 요소라서 상하 마진을 넣을 수 없다고 답변해 주셨다.

HTML에서 요소는 두 가지 유형으로 분류된다.
바로 인라인 요소(Inline Elements)와 블록 요소(Block Elements)

 

인라인 요소

- 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들
- 인라인 요소는 컨텐츠의 폭과 높이에만 영향을 미치며, 전체 줄의 폭을 차지하지 않음.
- 다른 인라인 요소나 텍스트가 함께 한 줄에 배치됨
- 상하 마진(margin) 적용 불가 (좌우 마진, 패딩 및 상하 패딩은 가능)
- 크기 조절(width, height) 불가능, 내부 컨텐츠에 따라 자동 결정

한 줄 배치

 

인라인 요소 예시

<span>: 스타일 적용 또는 텍스트의 일부분 그룹화
<a>: 하이퍼링크 생성
<strong>, <em>: 텍스트를 굵게 또는 기울게
<img>: 이미지

 

블록 요소

- 기본적으로 새로운 줄 생성(줄바꿈), 전체 가로폭을 차지함
- 문서 구조를 형성하거나 큰 덩어리의 컨텐츠를 그룹화할 때 사용
- 다른 블록 요소나 인라인 요소 포함 가능
- 웹 페이지의 레이아웃 구성에 자주 사용
- 상하 여백 사용 가능
- 크기 조절(width, height) 가능

다음 줄에 배치

 

블록 요소 예시

<div>: 컨텐츠 그룹화 시 사용
<p>: 단락
<h1>~<h6>: 제목
<ul>, <ol>, <li>: 목록
<header>, <footer>, <section>, <article>: 문서의 다양한 섹션 정의

그럼 인라인 요소에 상하 마진을 주고 싶거나, 크기 조절이 필요할 때는?

display: inline-block; 을 사용하면, 인라인 요소처럼 한 줄에 배치되지만 블록 요소처럼 상하 여백과 크기 조절이 가능!

 

인라인 블록 요소

- 인라인 요소처럼 한 줄에 배치되지만, 블록 요소처럼 크기 조절과 상하 마진 적용이 가능
- 여러 요소를 가로로 배치해야 할 때, 특히 요소의 크기와 간격을 정확하게 제어해야 할 때 유용

상하 margin 적용 가능

인라인 요소와 비교