如何使用 CSS 盒模型？ 每个 CSS 元素本质上都是一个盒子。每个元素都是一个通用的盒子。 盒模型根据一些 CSS 属性解释元素的大小。 从内到外，我们有： 内容区域 内边距 边框 外边距 最好的方式是打开浏览器的开发者工具并查看它的显示： 在这里，你可以看到 Firefox 告诉我一个我突出显示的 span 元素的属性。我右键点击它，按下检查元素，然后转到开发者工具的布局面板。 你可以看到，浅蓝色的空间是内容区域。它周围有内边距、边框和外边距。 默认情况下，如果你在元素上设置了宽度（或高度），宽度将应用于内容区域。所有的内边距、边框和外边距计算都是在值的外部完成的，所以当你进行计算时，要记住这一点。 你可以使用 Box Sizing 更改这种行为。
默認情況下，如果在元素上設置了寬度（或高度），這將應用於內容區域。 這不包括填充、邊框和外邊距，它們是添加在其上面的。 例如，我在一個p元素上設置了以下CSS： p { width: 100px; padding: 10px; border: 10px solid black; margin: 10px; } 下面是瀏覽器應用的效果： 您可以通過設置box-sizing屬性來更改這種行為。如果將其設置為border-box，則計算寬度和高度時將包括填充和邊框。 在前面的示例中，這是什麼意思： p { box-sizing: border-box; width: 100px; padding: 10px; border: 10px solid black; margin: 10px; } 看到了嗎？實際元素大小現在是60，因為它是100 - 10 * 2（填充）- 10 * 2（邊框）。 只有外邊距被忽略，這是合理的，因為在我們的思維中，我們通常將其視為一個獨立的事物：外邊距在元素的框外。 這個屬性是一個小改變，但在計算元素尺寸時有很大的影響。 在Codepen上的演示 如果您喜歡使用它，您可以通過以下CSS規則將它應用於頁面上的每個元素： *, *:before, *:after { box-sizing: border-box; }