CSS盒模型详解：内容边距边框外边距全解析

本篇文章给大家分享《CSS盒模型包含内容（content）、内边距（padding）、边框（border）和外边距（margin）四部分。 内容（Content）： 是盒子中最核心的部分，用于显示文本、图片等实际内容。其宽度和高度由 width 和 height 属性控制。 内边距（Padding）： 是内容与边框之间的空间，用于控制内容与边框之间的距离。通过 padding 属性设置，可以分别设置上、右、下、左四个方向的内边距。 边框（Border）： 是围绕内容和内边距的线条，用于装饰或分隔元素。可以通过 border 属性设置边框的宽度、样式和颜色。 外边距（Margin）： 是盒子与其他元素之间的空间，用于控制元素之间的间距。通过 margin 属性设置，同样可以分别设置四个方向的外边距。 此外，CSS 提供了 box-sizing 属性来控制盒模型的计算方式： content-box（默认）：宽度和高度仅包括内容区域，不包含 padding 和 border。 border-box：宽度和高度包括内容、padding 和 border，更便于布局控制。》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

CSS盒模型由content、padding、border和margin四部分组成，决定元素在页面中的空间与位置。1. Content是显示内容的区域，width和height默认仅作用于内容区；2. Padding为内容与边框间的内边距，背景会延伸至该区域，不可为负；3. Border是围绕padding的边框，含宽、样式、颜色三个属性；4. Margin是盒子间的外边距，透明且不显示背景，可设负值以实现重叠。默认box-sizing: content-box，设置box-sizing: border-box时width包含padding和border，更利于布局控制。

CSS盒模型是网页布局的基础概念，每个HTML元素都可以看作是一个矩形盒子，这个盒子由四个部分组成：content（内容）、padding（内边距）、border（边框） 和 margin（外边距）。这四部分共同决定了元素在页面中所占的空间大小和位置。

1. Content（内容区）

这是盒子最核心的部分，用于显示元素的实际内容，比如文字、图片或其他媒体。内容区的尺寸可以通过 width 和 height 属性来设置。默认情况下，这两个值只包括内容本身，不包含 padding、border 和 margin（这是标准盒模型的行为）。

2. Padding（内边距）

内边距是内容区与边框之间的空间，它属于盒子内部，背景颜色或背景图像会延伸到 padding 区域。padding 分为上、右、下、左四个方向，可以统一设置，也可以分别设置：

• padding: 10px; —— 四个方向都为10px
• padding: 5px 10px; —— 上下5px，左右10px
• padding: 10px 5px 8px 15px; —— 按顺时针：上、右、下、左

padding 的值不能为负数。

3. Border（边框）

边框位于 padding 的外围，是围绕元素的一条线，用于将该元素与其他元素分隔开。border 有三个属性：宽度（width）、样式（style）和颜色（color）。例如：

表示一个2像素宽、实线、黑色的边框。border 也支持分别设置四个方向：

• border-top
• border-right
• border-bottom
• border-left

4. Margin（外边距）

外边距是盒子与其他元素之间的透明区域，用于控制元素之间的距离。margin 不包含在元素的背景内，不会显示背景色或图像。和 padding 类似，margin 也可以分方向设置：

margin 可以为负值，这在某些布局技巧中非常有用，比如实现元素重叠或调整位置。

在CSS中，默认使用的是标准盒模型（box-sizing: content-box），即 width 和 height 只包括 content。如果想让 width 包含 content + padding + border，可以设置：

这样更便于精确控制布局，尤其在响应式设计中被广泛使用。

基本上就这些。理解这四个部分如何影响元素的尺寸和间距，是掌握CSS布局的关键。

今天关于《CSS盒模型详解：内容边距边框外边距全解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！