padding-left
試一試
padding-left: 1.5em;
padding-left: 10%;
padding-left: 20px;
padding-left: 1ch;
padding-left: 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;
}
元素的內邊距區域是其內容與其邊框之間的空間。
注意： padding 屬性可以透過單個宣告設定元素所有四個方向的內邊距。
語法
css
/* <length> values */
padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;
/* <percentage> value */
padding-left: 10%;
/* Global values */
padding-left: inherit;
padding-left: initial;
padding-left: revert;
padding-left: revert-layer;
padding-left: unset;
padding-left 屬性的值從以下列表中選擇一個。與外邊距不同，內邊距不允許使用負值。
值
<length>-
內邊距的固定值大小。必須是非負數。
<percentage>-
內邊距的百分比大小，相對於包含塊的行內尺寸（在水平語言中為寬度，由
writing-mode定義）。必須是非負數。
正式定義
| 初始值 | 0 |
|---|---|
| 應用於 | 所有元素，除了 table-row-group、table-header-group、table-footer-group、table-row、table-column-group 和 table-column。它也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 否 |
| 百分比 | 參照包含塊的寬度 |
| 計算值 | 指定的百分比或絕對長度 |
| 動畫型別 | 一個長度 |
正式語法
padding-left =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
示例
使用畫素和百分比設定左內邊距
css
.content {
padding-left: 5%;
}
.side-box {
padding-left: 10px;
}
規範
| 規範 |
|---|
| CSS Box Model Module Level 3 # 物理內邊距 |
瀏覽器相容性
載入中…