CSS盒模型内容区content区与边框border区关系解析

内容区（content）是盒模型中显示实际内容的区域，由width和height决定大小，默认不包含padding和border；边框区（border）位于padding外侧，用于装饰和界定元素边界，增加元素总尺寸。在默认box-sizing: content-box下，width仅指内容区宽度，border和padding额外增加整体尺寸；当设置box-sizing: border-box时，width和height包含content、padding和border，此时border不再额外扩展空间，而是压缩content区域以保持总宽高不变。这种机制影响元素布局计算，正确使用可避免尺寸错位，提升页面布局精度。

CSS盒模型中，内容区（content）与边框区（border）是构成元素总尺寸的两个关键部分，它们之间有明确的层级和空间关系。理解这两者的关系，有助于准确控制页面布局和元素大小。

内容区（Content）是盒模型的核心

内容区是盒子中最内层的部分，用于显示文本、图片等实际内容。它的尺寸由 width 和 height 属性决定，默认情况下不包含内边距（padding）和边框（border）。当设置了 box-sizing: content-box 时（这是默认值），width 和 height 仅指内容本身的大小。

• 设置 width: 200px; height: 100px; 时，内容区占据 200×100 像素的空间
• 如果再添加 padding 或 border，元素整体占用的空间会更大

边框区（Border）包围在内容区外围

边框位于内边距（padding）之外、外边距（margin）之内，直接包裹内容区和 padding 区。边框的样式、宽度和颜色通过 border 相关属性设置。边框的存在会增加元素的总占用宽度和高度，尤其是在使用默认 box-sizing 的情况下。

• 一个元素 width: 200px; padding: 10px; border: 5px solid black;
• 其实际占用宽度为：200 + 10×2 + 5×2 = 230px
• 这表明边框是在内容宽度之外额外扩展的

box-sizing 改变 content 与 border 的关系

通过设置 box-sizing: border-box，可以改变 content 与 border 的计算方式。此时，width 和 height 包含了内容、内边距和边框的总和。

万彩商图

专为电商打造的AI商拍工具，快速生成多样化的高质量商品图和模特图，助力商家节省成本，解决素材生产难、产图速度慢、场地设备拍摄等问题。

201

查看详情

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

• 设置 width: 200px; box-sizing: border-box; border: 5px solid black;
• 浏览器会自动将内容区压缩为 190px 宽（200 - 两边各5px边框），以保证整体宽度仍为200px
• 这种模式更便于精确布局，尤其在栅格系统中广泛使用

基本上就这些。content 是内容承载区域，border 是装饰和边界线，两者通过 box-sizing 决定是否共享 width/height 空间。掌握这一点，能避免常见的布局错位问题。

以上就是CSS盒模型内容区content区与边框border区关系解析的详细内容，更多请关注php中文网其它相关文章！