padding設置和清除

時間 2019-12-12

標籤 padding 設置清除简体版

原文原文鏈接

padding設置和清除

標籤（空格分隔）： paddingcss

padding介紹：

padding：就是內邊距的意思，它是邊框到內容之間的距離；
另外padding的區域是有背景顏色的。而且背景顏色和內容的顏色同樣。也就是說background-color這個屬性將填充全部的border之內的區域；html

以下代碼;觀察一下paddingpython

<!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]code

修改padding看看以下的代碼：htm

<!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]get

3.background-color的背景區域:qt

<!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]it

<!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]class

padding 的設置：

padding有四個方向，全部咱們能分別的描述4個方向的padding，方法有兩種：一、寫小屬性，二、寫綜合屬性，用空格隔開；
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]

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。