CSS盒子内边距(padding)

内边距:内容与盒子边框的距离。

语法:

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度云笔记

发表评论

邮箱地址不会被公开。

微信