CSS盒模型包括哪几部分_content padding border margin详细说明

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 的值不能为负数。

立即进入“豆包AI人工智官网入口”；

立即学习“豆包AI人工智能在线问答入口”；

3. Border（边框）

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

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

豆包大模型

字节跳动自主研发的一系列大型语言模型

834

查看详情

• 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盒模型包括哪几部分_content padding border margin详细说明的详细内容，更多请关注php中文网其它相关文章！