填充顶部 | padding-top
CSS属性padding-top 是指一个元素在内边距区域（padding area）中上方的高度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种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: unset;元素的填充区域是其内容和边界之间的空间。
初始值 | 0 |
|---|---|
适用元素 | all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter. |
是否是继承属性 | no |
Percentages | refer to the width of the containing block |
适用媒体 | visual |
计算值 | the percentage as specified or the absolute length |
Animation type | a length |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
值
length当内边距（padding）大小是一个固定单位数值的时候，一定不能为负数。percentage当内边距（padding）是一个百分比的时候， 百分比是和父元素的宽度有关的，同样一定不能为负数。
正式语法
<length> | <percentage>示例
.content { padding-top: 5%; }
.sidebox { padding-top: 10px; } 规范
Specification | Status | Comment |
|---|---|---|
CSS Basic Box ModelThe definition of 'padding-top' in that specification. | Working Draft | No change from CSS Level 2 (Revision 1)The definition of 'padding-top' in that specification.. |
CSS TransitionsThe definition of 'padding-top' in that specification. | Working Draft | Defines padding-top as animatable. |
CSS Level 2 (Revision 1)The definition of 'padding-top' in that specification. | Recommendation | No change from CSS Level 1The definition of 'padding-top' in that specification.. |
CSS Level 1The definition of 'padding-top' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.0) | 4.0 | 3.5 | 1.0 (85) |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support | ? | (Yes) | ? | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
