block element와 inline element의 차이는 무엇인가요?

Question

Accepted Answer

모든 element는 레이아웃에서 어떻게 흐르는지를 제어하는 기본 **display** 동작을 가집니다. - **Block** element는 **새 줄**에서 시작하며 **가능한 전체 너비**를 차지합니다. width/height와 모든 margin/padding을 적용할 수 있습니다. 예: `

`, `

`, `
`, `
`. - Inline element는 한 줄 안에서 흐르며 콘텐츠 너비만큼만 차지하고, width/height와 상/하 margin을 무시합니다. 예: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## 실무에서 흔히 빠지는 함정 ```css span { width: 200px; height: 50px; } /* ❌ 무시됨 — span은 inline이다 / ``` inline element에 `width`/`height`를 설정해도 아무 효과가 없습니다. 해결책은 display를 바꾸는 것입니다. ```css span { display: inline-block; width: 200px; } / ✅ inline으로 흐르되 크기를 존중한다 / ``` ## inline-block — 두 가지 장점을 모두 `inline-block`은 텍스트 흐름 속(나란히)에 위치하면서 동시에* width/height/margin을 존중합니다. 한 줄에 배치되는 내비게이션 항목, 배지, 버튼에 적합합니다. ```text block → 새 줄, 전체 너비, 크기 조절 가능 inline → 줄 안, 콘텐츠 너비, 크기 조절 불가 (세로 방향) inline-block → 줄 안, 콘텐츠 흐름, 크기 조절 가능 ``` ## 왜 중요한가 기본 display를 이해하면 ``이 왜 높이를 갖지 않는지, `
`가 왜 쌓이는지, 언제 `inline-block`, `flex`, `grid`로 전환해야 하는지를 알 수 있습니다. 이는 레이아웃 시스템을 적용하기 전에 element가 어떻게 배치되는지의 기초입니다.