padding-top
试一试
padding-top: 1em;
padding-top: 10%;
padding-top: 20px;
padding-top: 1ch;
padding-top: 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-top: 0.5em;
padding-top: 0;
padding-top: 2cm;
/* <percentage> value */
padding-top: 10%;
/* Global values */
padding-top: inherit;
padding-top: initial;
padding-top: revert;
padding-top: revert-layer;
padding-top: unset;
padding-top 属性指定一个值，该值从下面的列表中选择。与外边距不同，内边距不允许负值。
值
<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-top =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
示例
使用像素和百分比设置顶部内边距
css
.content {
padding-top: 5%;
}
.side-box {
padding-top: 10px;
}
规范
| 规范 |
|---|
| CSS Box Model Module Level 3 # 物理内边距 |
浏览器兼容性
加载中…