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-简写 |
浏览器兼容性
加载中…