padding
試一試
padding: 1em;
padding: 10% 0;
padding: 10px 50px 20px;
padding: 10px 50px 30px 0;
padding: 0;
<section id="default-example">
<div class="transition-all" id="example-element">
<div class="box">
Far out in the uncharted backwaters of the unfashionable end of the
western spiral arm of the Galaxy lies a small unregarded yellow sun.
</div>
</div>
</section>
#example-element {
border: 10px solid #ffc129;
overflow: hidden;
text-align: left;
}
.box {
border: dashed 1px;
}
元素的內邊距區域是其內容與其邊框之間的空間。
注意：內邊距在元素內部建立額外空間。相比之下，margin 在元素周圍建立額外空間。
構成屬性
此屬性是以下 CSS 屬性的簡寫：
語法
css
/* Apply to all four sides */
padding: 1em;
/* top and bottom | left and right */
padding: 5% 10%;
/* top | left and right | bottom */
padding: 1em 2em 2em;
/* top | right | bottom | left */
padding: 5px 1em 0 2em;
/* Global values */
padding: inherit;
padding: initial;
padding: revert;
padding: revert-layer;
padding: unset;
padding 屬性可以使用一個、兩個、三個或四個值來指定。每個值都是一個<length>或一個<percentage>。負值無效。
- 當指定一個值時，它將相同的內邊距應用於所有四邊。
- 當指定兩個值時，第一個內邊距應用於上下，第二個應用於左右。
- 當指定三個值時，第一個內邊距應用於頂部，第二個應用於左右，第三個應用於底部。
- 當指定四個值時，內邊距按順序（順時針）應用於上、右、下和左。
值
<length>-
內邊距的固定值大小。
<percentage>-
內邊距的百分比大小，相對於包含塊的行內尺寸（在水平語言中是寬度，由
writing-mode定義）。
正式定義
| 初始值 | 作為簡寫中的每個屬性 |
|---|---|
| 應用於 | 所有元素，除了 table-row-group、table-header-group、table-footer-group、table-row、table-column-group 和 table-column。它也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 否 |
| 百分比 | 參照包含塊的寬度 |
| 計算值 | 作為簡寫中的每個屬性
|
| 動畫型別 | 一個長度 |
正式語法
padding =
<'padding-top'>{1,4}
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
示例
用畫素設定內邊距
HTML
html
<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>
CSS
css
h4 {
background-color: lime;
padding: 20px 50px;
}
h3 {
background-color: cyan;
padding: 110px 50px 50px 110px;
}
結果
用畫素和百分比設定內邊距
css
padding: 5%; /* All sides: 5% padding */
padding: 10px; /* All sides: 10px padding */
padding: 10px 20px; /* top and bottom: 10px padding */
/* left and right: 20px padding */
padding: 10px 3% 20px; /* top: 10px padding */
/* left and right: 3% padding */
/* bottom: 20px padding */
padding: 1em 3px 30px 5px; /* top: 1em padding */
/* right: 3px padding */
/* bottom: 30px padding */
/* left: 5px padding */
規範
| 規範 |
|---|
| CSS Box Model Module Level 3 # padding-簡寫 |
瀏覽器相容性
載入中…