css中padding填充詳解-css教學-PHP中文網

css中padding填充詳解

迷茫

發布： 2017-03-25 15:34:49

原創

2243 人瀏覽過

語法：

padding：[ | ]{1,4}

##預設值：看每個獨立屬性

適用於：所有元素，除table-row-group | table-header-group | table-footer-group | table-column-group | table- row 外

繼承性：無

動畫性：是

計算值：看每個獨立屬性

相關屬性：[ padding-top ] || [ padding-right ] || [ padding-bottom ] || [ padding-left ]

#取值：

：用長度值來定義內部補白。不允許負值
：用百分比來定義內部補白。在水平（預設）書寫模式下，參考其包含區塊 width進行計算，其它情況參照 height 。不允許負值

說明：

檢索或設定物件四邊的內部邊距。

如果提供全部四個參數值，將依照上、右、下、左的順序作用於四邊。
如果只提供一個，將用於全部的四邊。
如果提供兩個，第一個用於上、下，第二個用於左、右。
如果提供三個，第一個用於上，第二個用於左、右，第三個用於下。
非替代(non-Replaced)行內元素可以使用該屬性設定左、右兩邊的內補丁；若要設定上、下兩邊的內補丁，必須先使該物件表現為區塊級或內聯區塊級。
對應的腳本特性為
padding。

TRBL

css中padding填充詳解

# 引申：margin,border

padding的值縮寫

padding : 20px; == padding : 20px 20px 20px 20px;

padding : 20px 10px;padding : 20px 10px;## = padding : 20px 10px 20px 10px;

##padding : 20px 10px 30px == padding : 20px 10px 30px 10px;

對面相等，後者省略；4 面相等，只設一######

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>padding 填充</title>
    <style type="text/css">
    p,span{
        border: 1px dashed red;
    }    
    .sample0{
        padding: 20px;
    }
    .sample1{
        padding: 40px 30px 20px 10px;
    }
    .sample2{
        padding: 20px 10px 20px;
    }
  
    .parent{
        padding:20px;
    }
   
   .child{
       border: 1px solid blue;
   }
    </style></head><body>
    <p class="sample0">sample</p><br>
    <p class="sample1">sample</p>
    <br>
    <p class="sample2">sample</p>
    <br>
    <p class="parent">
        <p class="child">child </p>
    </p></body></html>

登入後複製

以上是css中padding填充詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！