这是一个非常基础且重要的 CSS 面试题，考察对盒模型和元素布局行为的理解。
核心区别总结
这三种 display 值决定了元素在页面流中的布局行为，主要体现在以下几个方面：
- 是否独占一行
- 能否设置宽高
- 水平方向的排列方式
- 垂直方向的对齐方式
详细对比
| 特性 | block (块级元素) | inline (行内元素) | inline-block (行内块元素) |
|---|---|---|---|
| 是否独占一行 | ✅ 是。前后会自动换行，独占一整行。 | ❌ 否。与其他 inline 元素在同一行显示。 | ❌ 否。与其他 inline 或 inline-block 元素在同一行显示。 |
| 能否设置宽度 (width) 和高度 (height) | ✅ 可以。可以自由设置宽高。 | ❌ 不可以。设置 width 和 height 无效，尺寸由内容决定。 | ✅ 可以。可以像 block 元素一样设置宽高。 |
| 水平方向上的 margin 和 padding | ✅ 左右 margin 和 padding 正常生效。上下 margin 会推开其他元素。 | ✅ 左右 margin 和 padding 生效（会占据空间）。 | ✅ 完全正常生效。 |
| 垂直方向上的 margin 和 padding | ✅ 上下 margin 和 padding 正常生效，会推开相邻元素。 | ❌ 上下 margin 无效（不会推开其他元素），但 padding 在视觉上有效（背景色会显示），但不会影响布局（即不占据外部空间）。 | ✅ 上下 margin 和 padding 都完全正常生效。 |
| 默认宽度 | 自动撑满父容器的 100% 宽度。 | 由内容宽度决定（收缩到内容大小）。 | 由内容宽度决定（收缩到内容大小），但可手动设置。 |
| 典型 HTML 元素示例 | <div>, <p>, <h1>–<h6>, <ul>, <li>, <section> 等。 | <span>, <a>, <strong>, <em>, <img> (注意：<img> 实际是 inline-block) 等。 | <button>, <input>, <select>, <textarea> 等表单元素；<img> 也是。 |
| 文本对其方式 (vertical-align) | ❌ 不适用。 | ✅ 适用。多个 inline 元素可以通过 vertical-align 调整垂直对齐。 | ✅ 适用。可以使用 vertical-align 进行垂直对齐。 |
关键特性详解
1. display: block;
- 行为：像一块砖头，从上到下堆叠。
- 优点：结构清晰，易于控制布局，适合做布局容器。
- 缺点：默认情况下无法与其它块级元素并排显示（除非使用浮动、Flexbox 或 Grid）。
2. display: inline;
- 行为：像文字一样，一个接一个地排列在一行。
- 优点：节省空间，适合包裹小段文本或链接。
- 缺点：无法精确控制尺寸和垂直间距，布局能力弱。
3. display: inline-block;
- 行为：结合了
inline和block的优点。它像inline一样可以在一行内排列，又像block一样可以设置宽高和完整的盒模型。 - 经典应用场景：
- 创建水平导航菜单（
<li>设置为inline-block）。 - 让多个 div 并排显示而不使用浮动。
- 制作图标+文字的按钮组合。
- 创建水平导航菜单（
- 常见问题：当多个
inline-block元素写在 HTML 中时（有换行或空格），它们之间会产生空白间隙。解决方法包括：- 将 HTML 标签紧密排列（无空格/换行）。
- 使用
font-size: 0在父元素上，然后在子元素重置字体大小。 - 使用 Flexbox 布局替代。
面试加分点
inline-block的间隙问题：能说出这个问题及其解决方案，是很大的加分项。- 与现代布局的对比：虽然
inline-block曾经是实现水平布局的主要手段，但现在更推荐使用 Flexbox 或 Grid，因为它们更强大、更灵活，且没有间隙问题。 img元素的默认 display 值：很多人以为<img>是inline，但实际上它的默认值是inline-block，因为它可以设置宽高，并且默认有vertical-align: baseline。visibility: hiddenvsdisplay: none：虽然不是本题，但有时会被追问。display: none会彻底移除元素（不占空间），而visibility: hidden只是隐藏（仍占空间）。
总结回答示例
block元素独占一行，可以设置宽高，上下外边距会推开其他元素。inline元素与其他元素同行显示，不能设置宽高，上下外边距无效。inline-block结合了二者优点：可以同行显示，又能设置宽高和完整的盒模型。它非常适合需要并排显示且需控制尺寸的场景，比如导航菜单，但要注意处理元素间的空白间隙问题。
THE END
