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 外侧。它用于控制元素之间的距离，不会影响内部内容，也不显示背景。
TextCortex
AI写作能手，在几秒钟内创建内容。
62 查看详情
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解析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/966358.html
微信扫一扫 
支付宝扫一扫 
