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{

            width: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{

            width: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{

            width: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{

            width: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{

            width: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{

            width: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]