CSS 教程 / CSS display：block、inline、inline-block 与隐藏方式

display 属性决定了元素如何生成盒子并参与布局。块级、内联和内联块在正常流中行为不同；display: none 会移除盒子，而 visibility: hidden 会保留其布局空间。

比较块级、内联和内联块

div·p 通常显示为块级元素，而 span·a 通常显示为行内元素。如果不为块级元素指定单独的宽度，它通常会填充其父元素的可用宽度。行内元素像句子中的字母一样放置在一行内，允许长内容跨多行拆分。行内块元素被视为放置在一行内的单个盒子，所以即使盒子内的内容换行，盒子本身也不会像普通行内元素那样被拆分成多块。

.item { width: 120px; height: 48px; padding: 8px; margin: 8px; }
.blocks .item { display: block; }
.inlines .item { display: inline; }
.inline-blocks .item { display: inline-block; }

整个示例给相同的三个 span 设置相同的大小和边距，只改变显示方式。block 会为每个项目另起一行，而 inline-block 则会在有空间的情况下将它们放在同一行。inline 的宽度·高度声明并不会使纯文本 span 的实际盒子尺寸变为那个数值，即使它仍然在样式列表中。请分别检查计算出的声明和实际使用的尺寸。

理解内联间距和替换元素

在普通的内联元素中，左右外边距与内边距会影响行内的空间。顶部和底部的内边距和边框可以绘制，但不会像块元素那样通过推动周围行来决定行高。如果给多行文本很大的垂直内边距，可能会出现重叠的现象。在整个示例中，我们通过在行高上留一些余地来观察显示效果。

不要把“内联元素无法调整尺寸”应用到每个元素。替换元素，如 img，会显示外部内容，即使默认显示为内联元素，也可以使用宽度和高度。示例中的蓝色矩形尺寸为 120 × 60 像素。应将其与普通文本 span 区分对待。MDN：块级与行内布局解释了其底层流式布局。

比较 display: none 和 visibility: hidden

DOM（文档对象模型）是浏览器将 HTML 文档视为元素结构的模型。通过 CSS 隐藏与删除 HTML 元素不同。使用 display: none 的段落仍然可以在开发者工具的 Elements 面板中找到。在整个示例的“前、目标、后”一行中，hidden 会在目标位置留下空白，而 none 会移除目标占用的空间，使后面的文字前移。

display: none 与 visibility: hidden 都会使本例的隐藏内容无法通过普通 Tab 导航获得焦点，并从无障碍树中移除。visibility: hidden 的后代若显式设为 visible，仍可能显示；不能把所有隐藏方式的行为一概而论。本练习比较的是静态文档中的盒子空间。对于真实的菜单和控件，还需要检查焦点管理以及必要信息是否仍然可用。参见 MDN：display, MDN：visibility.

在正常流中对齐 inline-block 盒子

因为 inline-block 在一行文本中，所以默认会对齐到该行的基线。如果你看到某个元素下方有空白或高度不同的元素未对齐，请同时检查 vertical-align 和 line-height。即使是 HTML 中元素之间的空白或换行，在 inline 布局中也可能显示为间隙。

即使你通过 display 改变外观，span 也不会自动具有标题语义，div 也不会自动获得原生按钮的键盘行为。请选择符合你意图的 HTML 并设置其位置。如果你需要同时管理多个盒子的对齐、间距和大小，之后学习的 Flexbox·Grid 规则可能更适合。一旦你理解了基本流向，就更容易判断排列的变化。如何沿着一个轴放置项目，在 Flexbox 基础：容器、项目和轴 中有完整示例。如何同时设计行和列，在 CSS 网格基础：轨道、线条和项目放置 中有完整示例。

运行示例并一次更改一个值

将下面的代码以 UTF-8 格式保存为 display.html 并打开。图片示例内嵌了 SVG 数据，不必下载额外图片文件。在同一文档中比较三种放置方法和三种隐藏状态。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparison of display and hiding</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .example { margin-block: 24px; padding: 8px; border: 1px dashed #777; }
    .item { width: 120px; height: 48px; padding: 8px; margin: 8px;
      border: 1px solid #a8653e; background: #ffe8dd; }
    .blocks .item { display: block; }
    .inlines { line-height: 3; }
    .inlines .item { display: inline; }
    .inline-blocks .item { display: inline-block; }
    .visibility-row { margin-block: 16px; padding: 8px; border: 1px solid #aaa; }
    .target { display: inline-block; width: 120px; height: 48px; background: #d9eee2; }
    .none .target { display: none; }
    .hidden .target { visibility: hidden; }
    .replaced { width: 120px; height: 60px; vertical-align: middle; }
  </style>
</head>
<body>
  <h1>Comparing block and inline elements</h1>
  <h2>block</h2><div class="example blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline</h2><div class="example inlines"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline-block</h2><div class="example inline-blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>Comparing visible, hidden, and removed boxes</h2>
  <div class="visibility-row">Front <span class="target">Visible target</span> Back</div>
  <div class="visibility-row hidden">Front <span class="target">Hidden target</span> Back</div>
  <div class="visibility-row none">Front <span class="target">Target with no box</span> Back</div>
  <h2>An image as an inline replaced element</h2>
  <p>Front <img class="replaced" alt="A blue rectangle 120px wide and 60px tall." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Crect width='48' height='24' fill='%237ebad3'/%3E%3C/svg%3E"> Back</p>
</body>
</html>

1. 在开发者工具中，检查 block 和 inline-block 项目的尺寸直到它们的边框。由于通用的 border-box 规则，它的尺寸为 120×48px。即使 inline 项目的宽度声明相同，它们也不会固定为 120px 宽。
2. 缩小窗口，查看第三个 inline-block 项目是否会换行到下一行。每个 block 都从新的一行开始，即使在宽屏上也是如此。
3. 在开发者工具中关闭 .none .target 规则的 display: none 声明。检查在目标出现时其后字母的位置是否发生变化。如果关闭 .hidden .target 的 visibility: hidden 声明，对象会出现，但原先保留的空间将保持不变。
4. 仅将图像的宽度更改为 160px。与常规的内联 span 不同，检查它是否改变尺寸，再恢复为 120px。如果保持高度为 60px 固定，只改变宽度，原始比例将会改变。

如果位置与预期不同，请检查最终的 display 值、父级放置方式、盒子大小和行高。不必一次又一次添加不起作用的尺寸声明，先区分元素类型和基本布局流会更有帮助。