CSS盒模型是什么_content padding border margin解析

CSS盒模型由content、padding、border、margin四部分组成，总宽=内容宽+内边距+边框+外边距；默认box-sizing: content-box（宽高仅含内容），设为border-box时宽高包含内容、内边距和边框，利于布局控制。

CSS盒模型是网页布局的核心概念，每个HTML元素都可以看作是一个矩形的盒子，这个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。理解这四个部分的作用和相互关系，有助于精准控制页面元素的大小和位置。

1. Content（内容区域）

content 是盒子中真正显示内容的区域，比如文字、图片或其他嵌套元素。它的大小由 width 和 height 属性决定。默认情况下，这两个值只包括内容本身，不包含 padding、border 和 margin。

2. Padding（内边距）

padding 是内容区域与边框之间的空间，用于控制内容与边框的距离。它有四个方向：上（padding-top）、右（padding-right）、下（padding-bottom）、左（padding-left），也可以用简写方式设置。

padding 会影响盒子的总尺寸，并且背景颜色或背景图像会延伸到 padding 区域。

立即学习“前端免费学习笔记（深入）”；

• 例如：padding: 10px; 表示四边都有10像素的内边距
• 若 content 宽度为 100px，左右 padding 各为10px，则实际占用宽度为 120px

3. Border（边框）

border 紧接在 padding 外侧，是盒子的边界线。它有三个属性：宽度（width）、样式（style）和颜色（color），如 border: 2px solid #000;。

边框也会增加盒子的总体积。如果设置了 border，元素在页面中占据的空间会更大。

• 常见样式包括：solid（实线）、dashed（虚线）、none（无边框）等
• border 是可见的，会影响布局和视觉表现

4. Margin（外边距）

margin 是盒子与其他元素之间的空白区域，位于 border 外侧。它用于控制元素之间的距离，不会影响内部内容，也不显示背景。

可图大模型

可图大模型（Kolors）是快手大模型团队自研打造的文生图AI大模型

32

查看详情

margin 可以设正值（拉开距离）或负值（重叠元素），还可能出现“外边距合并”现象（相邻垂直 margin 会取最大值）。

• 例如：margin: 20px auto; 可实现块级元素水平居中
• margin 不参与背景绘制，透明且不可见

一个元素的总宽度计算公式为：

width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

高度同理。

注意：默认的 box-sizing: content-box 模式下，width 和 height 只指 content。若设置为 box-sizing: border-box，则 width 和 height 包括 content、padding 和 border，更便于布局控制。

基本上就这些。掌握 content、padding、border、margin 的作用和叠加方式，就能更准确地设计和调试页面布局。

以上就是CSS盒模型是什么_content padding border margin解析的详细内容，更多请关注php中文网其它相关文章！