在 CSS 布局中，display: block、display: inline 和 display: inline-block 是最常用的三种显示方式。它们决定了元素在页面中的呈现行为，包括是否独占一行、是否可以设置宽高、如何排列等。
本文将深入解析这三种 display 属性值的区别，并结合实际开发场景帮助你更好地理解和使用它们。
📌 一、基本概念回顾
| display 类型 | 是否独占一行 | 可否设置宽高 | 可否设置 margin/padding | 元素排列方式 |
|---|---|---|---|---|
block |
✅ | ✅ | ✅ | 自上而下垂直排列 |
inline |
❌ | ❌ | 水平方向 ✅，垂直方向 ❌ | 同行排列 |
inline-block |
❌ | ✅ | ✅ | 同行排列 |
🧩 二、逐项对比分析
1. display: block
特点：
- 独占一行；
- 可以设置
width、height； - 可以设置任意方向的
margin和padding； - 默认从上到下垂直排列多个块级元素；
常见元素：
<div>、<p>、<h1>到<h6>、<ul>、<li>等。
示例：
html
<div style="display: block; width: 100px; height: 50px; background: lightblue;">块级元素</div>
<div style="display: block; width: 100px; height: 50px; background: lightgreen;">另一个块级元素</div>两个 div 会分别占据一行。
2. display: inline
特点：
- 不独占一行；
- 不能设置宽高；
- 只能设置水平方向（left/right）的 margin 和 padding；
- 垂直方向（top/bottom）的 margin 和 padding 会被忽略；
- 多个 inline 元素在同一行内依次排列；
常见元素：
<span>、<a>、<strong>、<em>等。
示例：
html
<span style="display: inline; margin: 10px 20px; background: yellow;">行内元素1</span>
<span style="display: inline; margin: 10px 20px; background: pink;">行内元素2</span>两个 span 会在同一行显示，并且 margin 左右生效，上下无效。
3. display: inline-block
特点：
- 不独占一行；
- 可以设置宽高；
- 可以设置所有方向的 margin 和 padding；
- 多个 inline-block 元素在同一行内依次排列；
- 结合了 block 和 inline 的优点；
常见用途：
- 导航栏菜单；
- 按钮组；
- 行内布局中需要固定大小的元素；
示例：
html
<div style="display: inline-block; width: 100px; height: 50px; background: lightblue;">inline-block 元素1</div>
<div style="display: inline-block; width: 100px; height: 50px; background: lightgreen;">inline-block 元素2</div>两个 div 会并排显示，并且宽度和高度都生效。
📌 三、常见问题与注意事项
1. inline-block 元素之间的空白间隙问题
当你使用 display: inline-block 排列多个元素时，HTML 中的换行或空格可能会导致元素之间出现"空隙"。
html
<div style="display: inline-block; width: 100px; background: red;">A</div>
<div style="display: inline-block; width: 100px; background: blue;">B</div>解决方案：
- 删除 HTML 中的换行符；
- 设置父容器
font-size: 0，然后子元素重新设置字体大小； - 使用负边距
margin-right: -4px； - 或者直接使用 Flexbox 布局替代 inline-block。
2. 何时使用 block、inline、inline-block？
| 场景 | 推荐 display 值 |
|---|---|
| 需要控制宽高、独立成块 | block |
| 需要与其他元素同行显示 | inline / inline-block |
| 需要同行显示 + 控制宽高 | inline-block |
| 隐藏元素 | none |
| 替代表格布局 | table, table-cell 等 |
| 继承父元素显示方式 | inherit |
🧠 四、总结对比表
| 特性 | block |
inline |
inline-block |
|---|---|---|---|
| 是否独占一行 | ✅ | ❌ | ❌ |
| 可否设置宽高 | ✅ | ❌ | ✅ |
| 可否设置 margin | ✅ | 水平方向 ✅ | ✅ |
| 可否设置 padding | ✅ | 水平方向 ✅ | ✅ |
| 多个元素排列方式 | 垂直排列 | 同行排列 | 同行排列 |
| 典型代表元素 | <div> |
<span> |
手动设置的元素 |