咨询MDN中“沿块级维度扩展以容纳内容”的含义及相关概念

先明确MDN原文描述：

默认情况下，块级元素的内容会填充包含它的父元素的可用行内空间，并沿块级维度扩展以容纳其内容。

下面逐个解答你的疑问：

1. 什么是块级维度？ #

在CSS正常流布局里，块级维度指的是垂直方向（默认文档流是从上到下排列元素）。与之对应的是行内维度（水平方向）——块级元素默认会占满父元素的水平行内空间，而垂直方向的大小则由内容决定。

2. 什么会沿块级维度扩展？ #

是块级元素本身。比如用<div>或<p>这类块级标签时，默认它们的高度不会固定，会随着内部内容的多少自动调整，垂直方向上“撑”到能装下所有内容的高度，这就是沿块级维度扩展的表现。

3. 此处所指的内容是什么？ #

这里的“内容”指块级元素内部包含的所有子内容，比如：

• 普通文本、换行的文字
• 嵌套的子元素（比如内部的<span>、<img>、其他块级元素）
• 带有边距、内边距的元素（这些空间也会被算进内容占用的高度里）

举个简单例子：在<p>标签里写5行文字，这个<p>的高度就会自动扩展到能容纳这5行文字的垂直高度，这就是MDN描述的实际表现。

内容的提问来源于stack exchange，提问作者Joel Castro