/ 单边边距设置 /.element { margin-top: 10px; / 上边距 / margin-right: 15px; / 右边距 / margin-bottom: 10px; / 下边距 / margin-left: 15px; / 左边距 /}/ 简写形式 /.element { margin: 10px 15px; / 高下边距 | 旁边边距 /}
边距可以用来创建元素之间的空间，或者将元素与页面边缘分开。当两个元素的垂直边距相遇时，它们会合并成一个边距，这个征象称为边距折叠。
边框（Border）边框是盒子的一个可视化组件，环绕着内边距和内容。边框的样式、宽度和颜色都可以自定义。
.element { border-style: solid; / 边框样式 / border-width: 2px; / 边框宽度 / border-color: black; / 边框颜色 /}/ 简写形式 /.element { border: 2px solid black;}
边框对付突出显示元素或分隔内容非常有用。你还可以只为边框的一边或几边设置样式。
添补是环绕内容内部的空间，它可以增加内容和边框之间的间隔。与边距不同，添补区域会被背景颜色或背景图片覆盖。
.element { padding-top: 5px; / 上添补 / padding-right: 10px; / 右添补 / padding-bottom: 5px; / 下添补 / padding-left: 10px; / 左添补 /}/ 简写形式 /.element { padding: 5px 10px; / 高下添补 | 旁边添补 /}
添补对付掌握元素内部的空缺区域非常有用，它可以帮助改进内容的可读性。
内容（Content）内容是盒子中的笔墨、图片或其他媒体。内容的大小可以通过设置width和height属性来掌握，但实际可见区域的大小还会受到内边距和边框的影响。
.element { width: 200px; height: 150px;}
内容区域是设计和布局的核心，所有的文本和媒体都在这里显示。
示例<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Margin, Border, Padding Example</title><style> body { font-family: 'Arial', sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; } .container { max-width: 800px; margin: auto; background-color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .header { background-color: #007bff; color: white; padding: 20px; text-align: center; } .content { padding: 20px; border: 1px solid #ddd; margin: 20px; } .box { background-color: #007bff; color: white; padding: 10px; margin: 10px; border: 3px solid #0056b3; text-align: center; } .footer { background-color: #333; color: white; padding: 10px; text-align: center; }</style></head><body><div class="container"> <div class="header"> <h1>Welcome to My Page</h1> </div> <div class="content"> <h2>Understanding CSS Box Model</h2> <p>The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. This model allows us to create space between elements and style them effectively.</p> <div class="box">Content Box</div> </div> <div class="footer"> Footer Content </div></div></body></html>
理解盒模型是前端开拓的根本，它许可我们精确掌握元素的布局和间距。通过恰当地利用边距、边框、添补和内容，我们可以创建出既都雅又功能强大的网页设计。随着相应式设计的兴起，当代CSS框架已经将盒模型的观点整合进其核心，使得跨设备布局变得更加同等和大略。
在日常开拓中，常常利用开拓者工具来检讨和调试盒模型的各个部分，确保我们的样式表现按照预期事情。节制盒模型，你将能够更加自傲地处理网页布局的寻衅。
