關於css的padding填充介紹-css教學-PHP中文網

關於css的padding填充介紹

高洛峰

發布： 2017-03-16 11:09:11

原創

1450 人瀏覽過

語法：

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
。不允許負值
說明：
#檢索或設定
物件

如果提供全部四個參數值，將依照上、右、下、左的順序作用於四邊。

如果只提供一個，將用於全部的四邊。關於css的padding填充介紹

如果提供兩個，第一個用於上、下，第二個用於左、右。 如果提供三個，第一個用於上，第二個用於左、右，第三個用於下。

非替代(non-Replaced)行內元素可以使用該屬性設定左、右兩邊的內補丁；若要設定上、下兩邊的內補丁，必須先使該物件表現為區塊級或內聯區塊級。

對應的腳本特性為

padding。

##TRBL

引申：

margin,border#padding的值縮寫

#################padding : ###20px;### == padding : ###20px 20px 20px 20px;####### ###############padding : ###20px 10px;### == padding : ###20px 10px 20px 10px;############################ ############padding :### 20px 10px 30px### == padding :### 20px 10px 30px 10px;############ ##### #### ######對面相等，後者省略；4 面相等，只設一######

nbsp;html>
    <meta>
    <title>padding 填充</title>
    <style>
    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>
    <p>sample</p><br>
    <p>sample</p>
    <br>
    <p>sample</p>
    <br>
    <p>
        </p><p>child </p>

登入後複製

######

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