理解宽度、高度、外边距与内边距
学习宽度、高度、外边距和内边距如何定义元素尺寸与间距。
理解宽度、高度、外边距与内边距 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
盒模型概念
每个 HTML 元素都会呈现为一个矩形框。CSS 盒模型描述了组成这个框的四个层次，从内到外依次是：内容 → 内边距 → 边框 → 外边距。
width 和 height
width 和 height 设置内容区域的尺寸。默认情况下，内边距和边框会在此尺寸之外额外增加。
<div class="box"></div>
padding
padding 是边框内部、内容与边框边缘之间的透明空间。它属于元素可点击区域和背景绘制区域的一部分。
<div class="card">Card content</div>
padding 长写法
可以分别设置每一条边：
<div class="element">Padded element</div>
margin
margin 是边框外部的透明空间。它会将其他元素推开。负外边距会使元素彼此靠近或重叠。
<div class="section">Centered section with bottom margin</div>
外边距合并
相邻块级元素之间的垂直外边距会合并：实际间距是两个外边距中较大的一个，而不是二者之和。水平外边距不会合并。
<h2>Heading</h2>
<p>Paragraph below — margins collapse to 30px, not 50px.</p>
阻止外边距合并
在以下情况下，外边距合并会被阻止：
- 元素是 flex 或 grid 子元素
- 父元素设置了
overflow: hidden - 父元素与第一个子元素之间有
padding - 兄弟元素之间有行内元素分隔
auto 外边距
对具有固定宽度的块级元素设置水平 auto 外边距，可以使其在容器内居中。这是经典的居中技术。
<div class="centered">Centered block, max 800px wide</div>
min-width、max-width、min-height、max-height
使用最小值和最大值限制尺寸，使元素在不同屏幕尺寸下都保持良好的可读性：
<div class="content">Readable content column capped at 65 characters wide.</div>
计算元素的总尺寸
在默认的 content-box 模型中，总宽度 = width + padding-left + padding-right + border-left + border-right。这可能令人意外，因此更推荐使用 border-box。
逻辑外边距和内边距属性
现代 CSS 提供了逻辑等效属性：margin-block、margin-inline、padding-block-start 等。这些属性会自动适应书写方向。
<div class="card">Logical padding-block/inline</div>
快速检查
在默认盒模型中，块级元素的总渲染宽度包含哪些层次？
回顾
盒模型的层次包括内容、内边距、边框和外边距。内边距位于边框内部，外边距位于边框外部。相邻兄弟元素之间的垂直外边距会合并。对固定宽度的块级元素使用 margin: 0 auto 可以使其居中。
常见问题解答
「理解宽度、高度、外边距与内边距」课时是免费的吗？
是的 — 「理解宽度、高度、外边距与内边距」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「理解宽度、高度、外边距与内边距」这节课中我会学到什么？
学习宽度、高度、外边距和内边距如何定义元素尺寸与间距。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「理解宽度、高度、外边距与内边距」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 理解宽度、高度、外边距与内边距
- 边框样式、宽度与颜色
- 盒模型尺寸：Content-Box 与 Border-Box
- 轮廓与盒阴影