padding
padding属性设置一个元素的内边距,padding 区域指一个元素的内容和其边界之间的空间,该属性不能为负值。padding简写属性可以避免分别设置每个边的内边距
示例
/* 应用于四个边 */
padding: 1em;
/* 垂直方向 | 水平方向*/
padding: 5% 10%;
/* 顶部 | 水平方向 | 底部*/
padding: 1em 2em 2em;
/* 顶部 | 右边 | 底部 | 左边*/
padding: 2px 1em 0 1em;
padding: inherit;
浏览器支持
语法
padding:[<length>| <percentage>]{1,4}
- 指定一个值时该值指定四个边的内边距
- 指定两个值时第一个值指定上下两边的内边距第二个指定左右两边的内边距
- 指定三个值时第一个指定上边的内边距。第二个指定左右两边第三个指定下边
- 指定四个值时分别为上右下左(顺时针顺序)
取值:
默认值 | 作为速记的每一个属性: |
适用于 | 所有元素,除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外 |
继承性 | 无 |
动画性 | 是 |
计算值 | 指定值 |
例子
padding: 5%; /* 所有边给 5% padding */
padding: 10px; /* 所有边给 10px padding */
padding: 10px 20px; /* top and bottom 10px 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 */
//HTML
<h4>hello world!</h4>
<h3>the padding is different in this line.</h3>
//CSS
h4{
background-color: green;
padding: 50px 20px 20px 50px;
}
h3{
background-color: blue;
padding: 400px 50px 50px 400px;
}