Css_填充属性详解

最新推荐文章于 2024-08-13 09:00:00 发布

Rapper_cl

最新推荐文章于 2024-08-13 09:00:00 发布

阅读量2.8k

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/m0_37510446/article/details/89952567

版权

Css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在css中，填充属性为padding，也成为内边距，但是其设置的值的个数不同，对应的方向也是不同：
当我们设置四个值时:
padding 20px 25px 30px 35px
顺序为，上填充，右填充，下填充，左填充
设置三个值时：
顺序为，上填充，左填充，下填充
设置两个值时：
顺序为，上填充，左填充

<!DOCTYPE html>
<html>
<head>
<meta chasrset="UTF-8"/>
<style>
#c1{
border:5px solid #a1a;
background-color:yellow;
padding:20px 30px 40px 50px;
}
#c2{
border:5px solid #a1a;
background-color:green;
padding:20px 30px 40px;
}
#c3{
border:5px solid #a1a;
background-color:yellow;
padding:20px 30px;
}
#c4{
border:5px solid #a1a;
background-color:green;
padding:20px;
}
</style>
</head>
<body>
<div id="c1">设置四个属性，分别是上，右，下，左</div>
<div id="c2">设置三个属性，分别是上，左，下</div>
<div id="c3">设置两个属性，分别是上，左</div>
<div id="c4">设置一个属性，上下左右就不用管了，都是一样的</div>
</body>
</html>