block 和 inline 元素有什么区别？

Question

Accepted Answer

每个元素都有一个默认的 **display** 行为，它控制元素如何在布局中流动。 - **Block** 元素在**新行**上开始，占据**全部可用宽度**。它们接受 width/height 和所有 margins/paddings。示例：`

`, `

`, `
`, `
`。 - Inline 元素在一行内部流动，宽度仅为其内容的宽度，且忽略 width/height 和 top/bottom margins。示例：``, ``, ``, ``。 ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## 一个实际的陷阱 ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` 在 inline 元素上设置 `width`/`height` 没有效果。解决方法是改变它的 display： ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — 两全其美 `inline-block` 保持在文本流中（并排），同时*尊重 width/height/margins——非常适合导航项、徽章或排成一行的按钮。 ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## 为什么这很重要理解默认 display 行为可以解释为什么你的 `` 不能设置高度，为什么 `
` 会堆叠，以及何时应该切换到 `inline-block`、`flex` 或 `grid`。这是在应用任何布局系统之前，元素如何排列的基础。