padding设置和清除
标签（空格分隔）： padding
padding介绍：
padding：就是内边距的意思，它是边框到内容之间的距离；
另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域；
如下代码;观察一下padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>认识padding</title>
<style type="text/css">
.box{
300px;
height:300px;
/*padding:20px;*/
/*background-color: red;*/
}
</style>
</head>
<body>
<div class="box">
内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
![image.png-221.5kB][1]
修改padding看看如下的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>认识padding</title>
<style type="text/css">
.box{
300px;
height:300px;
padding:20px;
/*background-color: red;*/
}
</style>
</head>
<body>
<div class="box">
内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
![image.png-351.2kB][2]
3.background-color的背景区域:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>认识padding</title>
<style type="text/css">
.box{
300px;
height:300px;
padding:20px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
![image.png-177.2kB][3]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>认识padding</title>
<style type="text/css">
.box{
300px;
height:300px;
padding:20px;
background-color: red;
border:1px solid yellow;
}
</style>
</head>
<body>
<div class="box">
内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
![image.png-282.4kB][4]
padding 的设置：
padding有四个方向，所有我们能分别的描述4个方向的padding，方法有两种：1、写小属性，2、写综合属性，用空格隔开；
1.小属性的写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>认识padding</title>
<style type="text/css">
.box{
300px;
height:300px;
/*padding:20px;*/
background-color: red;
/*border:1px solid yellow;*/
/*小属性*/
padding-top: 30px;
padding-right: 30px;
padding-bottom:30px;
padding-left: 30px;
}
</style>
</head>
<body>
<div class="box">
内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
![image.png-247.8kB][5]
2.写综合属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>认识padding</title>
<style type="text/css">
.box{
300px;
height:300px;
/*padding:20px;*/
background-color: red;
/*border:1px solid yellow;*/
/*!*小属性*!*/
/*padding-top: 30px;*/
/*padding-right: 30px;*/
/*padding-bottom:30px;*/
/*padding-left: 30px;*/
/*综合属性*/
padding:20px 30px 40px 50px;
}
</style>
</head>
<body>
<div class="box">
内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
![image.png-220.5kB][6]
通过如图可以知道，我们的设置方向是：上右下左；
如果我们设置三个值的时候：上，左右，下
如果我们设置两个值的时候：上下左右；
如果我们设置1个值的时候：全部就是4个方向都是一样的；
一些标签默认有padding
比如ul标签，有默认的padding-left值。如图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>padding</title>
</head>
<body>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
</html>
![image.png-237.2kB][7]
那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。我们现在初学可以使用通配符选择器；
*{
padding:0;
margin:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>padding</title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
</html>
![image.png-209.1kB][8]
But，这种方法效率不高。
所以我们要使用并集选择器来选中页面中应有的标签（不用背，因为有人已经给咱们写好了这些清除默认的样式表，搜索一下reset.css，就可以找到很多，大家可以直接使用）
[1]: http://static.zybuluo.com/wangcherry123/gnspvhg1ptkepih1u55zq7d4/image.png
[2]: http://static.zybuluo.com/wangcherry123/l0d4hqa24yc1aplxm6zqo6z0/image.png
[3]: http://static.zybuluo.com/wangcherry123/wcqtq47ax6ito2pwi6wieqhz/image.png
[4]: http://static.zybuluo.com/wangcherry123/s1jabz4323i5lidt8e44fi5q/image.png
[5]: http://static.zybuluo.com/wangcherry123/2krwx29bv6stmo95gmgh12m7/image.png
[6]: http://static.zybuluo.com/wangcherry123/sk3er1069bbaovqyyiy831iz/image.png
[7]: http://static.zybuluo.com/wangcherry123/odeif267s96w0s3h975etrqg/image.png
[8]: http://static.zybuluo.com/wangcherry123/5mmlny6kz6rnatt36fn2fsbv/image.png
