CSS内边距
内边距 ：内容区（Content）与边框（Border）之间的透明间距，用于增加元素内部的留白。不影响元素内容本身的尺寸（如文字大小），但会增大元素的总占用空间。
以下是CSS中常用的内边距属性：
padding-top: 设置元素的顶部内边距大小
padding-right: 设置元素的右侧内边距大小
padding-bottom: 设置元素的底部内边距大小
padding-left: 设置元素的左侧内边距大小
padding : 设置元素的所有内边距大小
以下是一个内边框设置示例：
<!DOCTYPE html>
<html>
<head><title>CSS内边距示例</title><style>.box {width: 200px;height: 200px;padding: 20px;background-color: lightgray;}</style>
</head>
<body><div class="box">这是一个盒子</div>
</body>
</html>
CSS边框
边框：定义 围绕内容和内边距的可见边界线，用于装饰或分隔元素。直接影响元素的总尺寸。
border-width: 设置边框宽度
border-style: 设置 边框样式（solid/dashed/dotted/double等）
border-color: 设置边框的颜色。
border : 可以一次性设置边框的宽度、样式和颜色。
以下是一个边框设置示例：
<!DOCTYPE html>
<html>
<head><title>CSS边框示例</title><style>.box {width: 200px;height: 200px;border: 1px solid black;background-color: lightgray;}</style>
</head>
<body><div class="box">这是一个盒子</div>
</body>
</html>
CSS外边距
外边距 ：元素与其他元素之间的透明间距，用于控制元素外部的布局间隔。
不影响元素自身尺寸，但会改变元素在页面中的占位空间。
1.设置单个方向的外边距：
margin-top: 10px; //上方外边距为10px
margin-right: 20px; //右方外边距为20px
margin-bottom: 30px; //下方外边距为15px
margin-left: 40px; //左方外边距为30px
2.使用缩写形式设置四个方向的外边距:
margin : 10px; //四个方向外边距都为10px
以下是设置外边距示例：
<!DOCTYPE html>
<html>
<head><style>.box {width: 200px;height: 200px;background-color: red;margin: 20px;}.box2 {width: 200px;height: 200px;background-color: blue;margin: 10px;}</style>
</head>
<body><div class="box">Box 1</div><div class="box">Box 2</div><div class="box2">Box 3</div>
</body>
</html>