CSS盒模型由width、height、padding、border和margin组成，决定元素的尺寸与布局。width和height设置内容区域大小，默认不包括padding和border；padding增加内容与边框间的空间，影响总尺寸；border为元素添加边框线，需定义样式才可见；margin控制元素外边距，可设负值且相邻块级元素垂直margin会合并；box-sizing属性改变尺寸计算方式，推荐使用border-box，使width和height包含padding和border，便于精确控制布局。综合运用这些属性可实现整齐、可控的页面结构。
在网页布局中，CSS盒模型是构建页面结构的基础。每一个HTML元素都可以看作是一个矩形的盒子，这个盒子由 width（宽度）、height（高度）、padding（内边距）、border（边框）和 margin（外边距）五部分组成。理解这些属性如何相互作用，对精准控制页面布局至关重要。
width 与 height：内容区域的尺寸
width 和 height 定义的是盒子中“内容区域”的大小，不包括 padding、border 和 margin。默认情况下，块级元素会占据父容器的全部宽度，而高度则由内容决定。
可以设置固定值（如 px、em），也可以使用百分比或 auto。例如：
.box { width: 200px; height: 100px;}
注意：当添加 padding 或 border 后，元素实际占用的空间会大于设定的 width/height，除非使用 box-sizing: border-box 来改变计算方式。
立即学习“前端免费学习笔记（深入）”；
padding：内容与边框之间的空间
padding 是内容到边框的距离，它让内容不至于紧贴边框，提升可读性和美观性。padding 可以分别设置四个方向，也可以统一设置。
常见写法：
padding: 10px; —— 四个方向都是10pxpadding: 10px 20px; —— 上下10px，左右20pxpadding: 10px 20px 15px 5px; —— 顺时针：上右下左
padding 会影响盒子总尺寸。例如，一个 width: 200px 的元素，加上左右各10px的 padding，其内容宽度不变，但内部可用空间减少，整体视觉宽度增加（若 box-sizing 为 content-box）。
border：盒子的边界线
border 是围绕 padding 和内容的边框，由三个属性组成：宽度（width）、样式（style）和颜色（color）。必须设置样式（如 solid、dashed）才会显示。
示例：
TextCortex
AI写作能手，在几秒钟内创建内容。
62 查看详情 
.box { border: 2px solid #333;}
也可单独设置某一边：
border-top: 1px dashed red;border-radius 还可让边框变圆角，增强视觉效果。
border 会增加盒子的实际尺寸，尤其是在 box-sizing: content-box 模式下需要特别注意。
margin：盒子与其他元素之间的距离
margin 控制元素外部的空间，用于控制元素间的间隔。margin 支持负值，可用于微调布局或实现重叠效果。
写法类似 padding：
.box { margin: 20px auto; /* 上下20px，水平居中 */}
块级元素的上下 margin 会发生“合并”现象（margin collapse），即两个相邻块的垂直 margin 会取较大者，而不是相加。这一点在排版时需特别留意。
box-sizing：控制盒模型计算方式
默认的 box-sizing: content-box 会让 width/height 仅表示内容区域，导致添加 padding 和 border 后盒子变大。推荐使用：
* { box-sizing: border-box;}
这样设置后，width 和 height 包含了 content、padding 和 border，更符合直觉，便于精确布局。
综合应用示例：创建一个卡片组件
.card { width: 300px; height: 200px; padding: 20px; border: 1px solid #ccc; border-radius: 8px; margin: 10px; background-color: #f9f9f9; box-sizing: border-box;}
在这个例子中，整个卡片的宽度就是 300px（包含 padding 和 border），上下 margin 为 10px，与其他元素保持间距，视觉整齐。
基本上就这些。掌握 width、height、padding、border、margin 和 box-sizing 的配合使用，就能灵活控制页面中每个元素的位置和尺寸，为复杂布局打下坚实基础。
以上就是CSS盒模型属性详解_width height padding margin border综合应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/965456.html
微信扫一扫 
支付宝扫一扫 
