当前位置：首页 > news >正文

CSS内边距、外边距、边框

news 来源：原创 2025/5/8 3:18:59

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>