内边距:内容与盒子边框的距离。
语法:
div {
padding-top: 5px;
}
语义:上边内边距5像素。
- padding-top 上内边距
- padding-bottom 下内边距
- padding-left 左内边距
- padding-right 右内边距
内边距复合属性
写法:
padding: 1px 2px 3px 4px;
注意:padding后面值的个数不同,表达的意思也是不同的。如下:
值的个数 | 表达意思 |
padding: 1px; | 1个值,代表上下左右都有1像素内边距 |
padding: 1px 2px; | 2个值,代表上下内边距是1像素,左右内边距是2像素 |
padding: 1px 2px 3px; | 3个值,代表上内边距1像素,左右内边距2像素,下内边距3像素 |
padding: 1px 2px 3px 4px; | 4个值,上是1像素,右2像素,下3像素,左是4像素。顺时针 |
内边距使用注意事项
padding会影响盒子的实际大小!也就是说,如果盒子已经有了宽度和高度,此时再指定内边距,就会撑大盒子!
解决方案:如果保证盒子跟效果图大小保持一致,则让width/ height减去多出来的内边距大小即可。
特殊情况:*如果盒子本身没有指定 width/height属性,则此时 padding不会撑开盒子大小*
版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!
转载请注明:转载于37.2度云笔记