内边距：内容与盒子边框的距离。
语法：
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度云笔记
微信扫一扫 