0%
- display: inline 的局限性
- 不能设置宽高 ：因为
inline 元素的尺寸完全由内容决定，无法通过 CSS 手动调整。
- 垂直方向的
margin 和 padding 无效 ：虽然可以设置这些属性，但它们不会影响其他元素的布局。
- 适合文本内容 ：通常用于
<span>、<a> 等需要与文本混合排版的元素。
- display: inline-block 的优势,结合了
inline 和 block 的优点 ：
- 像
inline 一样可以同行排列。
- 像
block 一样可以设置宽高和垂直方向的 padding/margin。
- 适合需要精确控制尺寸的行内元素 ：例如导航栏中的按钮、图片画廊等。
- display: block 的典型用途
- 结构化布局 ：用于页面的主要结构划分，例如标题、段落、表格等。
- 独占一行 ：确保元素不会与其他元素共享同一行。
总结
| 特性 |
display:block |
display:inline-block |
display:inline |
| 是否独占一行 |
是 |
否 |
否 |
| 是否可以设置宽高 |
可以 |
可以 |
不可以 |
| 是否受空白符影响 |
不受影响 |
受影响（元素之间可能有间隙） |
不受影响 |
| 默认宽度 |
填满父容器 |
仅包裹内容 |
仅包裹内容 |
| 是否可以设置垂直 padding/margin |
可以 |
可以 |
不可以 |
| 适用场景 |
需要独占一行的布局（如标题、段落） |
需要同行排列且能设置宽高的布局（如按钮） |
需要同行排列且无需设置宽高的布局（如文本） |