[CSS] Display: block과 inline의 차이

웹에서 요소가 어떻게 배치될지를 결정하는 가장 기본 속성이 display입니다.
그중 가장 대표적인 값이 block과 inline입니다.

 

1. display: block

block 요소는 한 줄을 혼자 전부 차지합니다.

 

1️⃣ 특징

• 항상 새 줄에서 시작
• 너비(width)를 지정하지 않으면 부모의 가로폭 전체 사용
• width, height, margin, padding 모두 적용 가능

2️⃣ 예시 태그

• div
• p
• h1 ~ h6
• section

레이아웃의 큰 구조를 만들 때 사용

 

2. display: inline

inline 요소는 줄 안에서 텍스트처럼 배치됩니다.

 

1️⃣ 특징

• 줄바꿈 ❌
• 콘텐츠 크기만큼만 차지
• width, height 지정 ❌
• 좌우 margin, padding만 적용

2️⃣ 예시 태그

• span
• a
• strong
• em

👉 문장 중 일부 강조에 적합

 

 

정리하면

구분	block	inline
줄바꿈	O	X
가로폭	전체 차지	내용만
width / height	가능	불가
용도	레이아웃	텍스트 스타일

block은 “줄 단위 박스”,
inline은 “글자 흐름 안의 요소”