盒子属性包括4部分，分别为内容区，边框，内边距，外边距。
目录
一.内容区（盒子中呈现的是实际内容，比如文字，图片等）
宽：width 高：height
块级元素可直接通过CSS设置宽高，但是行内元素默认情况下不可以。
如果要设置行内元素的宽高，需在CSS代码中添加display：block。
运行代码：
.xph{
width: 200px;
height: 200px;
border: 1px solid blue;
}
.wb{
width: 200px;
height: 25px;
border: 1px solid red;
display: block; /* 块级元素显示 */
}
</style>
</head>
<body>
<img src="../小屁孩.jpg" class="xph"><br>
<del class="wb">我是文本</del>
</body>
</html>运行结果：
二.边框
盒子模型的边框可以通过CSS的border属性来设置。
| border-width | 四边宽度 |
| border-style | 样式 |
| border-color | 颜色 |
| border-top | 上边框宽度 样式 颜色 |
| border-right | 右边框宽度 样式 颜色 |
| border-bottom | 下边框宽度 样式 颜色 |
| border-left | 左边框宽度 样式 颜色 |
- border-width：用于设置边框的宽度。
- border-style：用于设置边框的样式，其参数为：
solid：实线 dotted：点线 dashed：虚线 double：双线
- border-color：用于设置边框的颜色
这些子属性可以分开设置，也可以合并在一起设置。例如：
border-width: 1px;
border-style: solid;
border-color: blue;也可以简写为：
border: 1px solid blue;示例代码：
<style>
.xph{
/* 设置盒子内容的宽高 */
width: 200px;
height: 200px;
/* 设置盒子的边框厚度,样式,颜色 */
border: 1px solid blue;
/* 设置盒子边框四个角的弧度 */
border-radius: 10px;
}
</style>
</head>
<body>
<img src="../小屁孩.jpg" class="xph"><br>
</body>
</html>运行结果：
三.内边距
盒子模型的内边距可以通过CSS的padding属性来设置。（注意：内边距属性不能负值）
| padding-top | 上内边距 |
| padding-right | 右内边距 |
| padding-bottom | 下内边距 |
| padding-left | 左内边距 |
示例代码：
<style>
.xph{
background-color: red;
width: 200px;
height: 200px;
padding-left: 10px;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 5px;
}
</style>
<body>
<img src="../小屁孩.jpg" class="xph"><br>
</body>
</html>运行结果：
盒子内边距其中用红色背景标识出来了
四.外边距
盒子模型的外边距可以通过CSS的margin属性来设置。（注意：外边距属性始终透明，不受背景填充颜色影响）
| margin-top | 上外边距 |
| margin-right | 右外边距 |
| margin-bottom | 下外边距 |
| margin-left | 左外边距 |
示例代码：
<style>
.jpsl{
width: 200px;
height: 20px;
margin-top: 100px;
margin-bottom: 15px;
margin-left: 20px;
margin-right: 25px;
background-color: blue;
}
</style>
</head>
<body>
<div class="jpsl">极品少萝</div>
</body>
</html>运行结果：
其距离网页上边距100px，距离网页左边距20px（其中网页默认外边距为8px，需要精确计算要减去8px）
感谢观看
标签：盒子,margin,模型,边框,padding,width,200px,border,属性 From： https://blog.csdn.net/2301_81426182/article/details/142904865