IT课程 CSS基础 025_边距和填充

zhaoJian.Net

发布于 2024-04-03 12:47:04

9800

代码可运行

文章被收录于专栏：zhaoJian.Net

运行总次数：0

代码可运行

边距

在CSS中，边距与填充是两个不同的概念，都是用于控制元素之间的空间和影响页面的布局。

边距（外边距）

边距（margin）是指元素与其相邻元素之间的空间，边距可以用于控制元素之间的距离，影响页面的布局，边距本身没有背景颜色，是完全透明的，不会影响元素的实际大小。可以为正值或负值，单位可以是像素（px）、百分比（%）、em等。

示例：

.base {
    width: 200px;
    height: 200px;
}
.example1 {
    margin: 10%;
    background-color: blue;
}
.example2 {
    margin: -50px 50px;
    background-color: green;
}
.example3 {
    margin: 10px 20px 30px 40px;
    background-color: red;
}

<div class="base example1"></div>
<br>
<div class="base example2"></div>
<br>
<div class="base example3"></div>

效果：

可使用 margin-top、margin-right、margin-bottom、margin-left 单独设置某一方向的边距。

示例：

.example1 {
    margin-top: 100px;
    margin-right: 50px;
    margin-bottom: 80px;
    margin-left: 50px;
    background-color: blue;
    width: 200px;
    height: 200px;
}

<div class="example1"></div>

效果：

填充（内边距）

填充（padding）是指元素内部内容与元素边框之间的空间，填充可以用于调整元素内部内容与边框之间的距离，影响元素的尺寸和布局，填充会继承元素的背景颜色，会影响元素的实际大小。不支持负值，单位可以是像素（px）、百分比（%）、em等。

示例：

.base {
    width: 200px;
    height: 200px;
}
.example1 {
    padding: 3%;
    background-color: blue;
}
.example2 {
    padding: 10px 50px ;
    background-color: green;
}
.example3 {
    padding: 10px 20px 30px 40px;
    background-color: red;
}

<div class="base example1">padding测试</div>
<br>
<div class="base example2">padding测试</div>
<br>
<div class="base example3">padding测试</div>

效果：

可使用 padding-top、padding-right、padding-bottom、padding-left 单独设置某一方向的填充。

示例：

.example1 {
    padding-top: 20px;
    padding-right: 50px;
    padding-bottom: 80px;
    padding-left: 10px;
    background-color: blue;
    width: 200px;
    height: 200px;
}

<div class="example1">padding测试</div>

效果：

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

布局

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度