content为内容区域，由width和height决定；2. padding是内容与边框间的内边距，背景延伸且增加元素尺寸；3. border是围绕元素的边框，具样式且增总大小；4. margin是外部透明间距，影响占位不计自身尺寸；整体呈嵌套结构，可通过box-sizing:border-box控制尺寸计算。
在CSS中，content、padding、border 和 margin 共同构成了一个元素的盒模型（Box Model），它们从内到外依次排列，决定了元素在页面中占用的空间和与其他元素的距离。
1. content：内容区域
这是盒模型最核心的部分，指的是元素的实际内容，比如文字、图片等。它的大小由 width 和 height 决定。默认情况下，设置的 width 和 height 就是 content 的尺寸。
2. padding：内边距
padding 紧挨着 content，是内容与边框之间的空白区域。它属于元素内部，背景色或背景图会延伸到 padding 区域。padding 会影响元素的整体大小，例如：
-
• content 宽度为 200px
• 左右 padding 各 10px
• 实际占据的宽度变为 220px（200 + 10 + 10）
3. border：边框
border 在 padding 外围，是围绕元素的一条线，可以设置颜色、宽度和样式（如实线、虚线）。border 也增加元素的总体尺寸。例如：
立即学习“前端免费学习笔记（深入）”；
-
• padding 后宽度为 220px
• 左右边框各 2px
• 总宽度变为 224px（220 + 2 + 2）
4. margin：外边距
margin 是 border 外部的空白区域，用于控制元素与其他元素之间的距离。margin 不包含背景，是完全透明的。它不计入元素自身的尺寸，但影响其在页面中占据的总空间。
-
• 元素自身宽 224px（含 content、padding、border）
• 左右 margin 各 15px
• 它在文档流中“推开”其他元素，占据总宽度为 254px
简单来说，这四个部分像一层层嵌套的盒子：
-
• 最里面是 content
• 包裹 content 的是 padding
• 再外面是 border
• 最外层是 margin
理解它们的关系有助于精准控制布局。可以通过 box-sizing: border-box 改变默认行为，让 width 和 height 包含 content、padding 和 border，这样更容易计算尺寸。
基本上就这些，掌握这个结构，页面布局会更清晰可控。
