css中padding填充詳解
- 迷茫原創
- 2017-03-25 15:34:492278瀏覽
語法：
padding：[
##預設值：看每個獨立屬性
適用於：所有元素，除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
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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn