padding设置和清除

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>


<meta charset="utf-8"/>
padding
上一篇:CSS实现三栏布局(5种)


下一篇:垂直居中