CSS - 盒子模型 - 内边距

---

一、什么是内边距

padding属性用于设置内边距, 即边框与内容之间的距离

1. 属性

• padding-left : 左内边距
• padding-right: 右内边距
• padding-top : 上内边距
• padding-bottom : 下内边距

二、padding的复合写法

padding 属性可以有一到四个值

• 一个值, 代表上下左右都有对应指定像素内边距
• 二个值, 代表上下内边距, 左右内边距为对应指定像素
• 三个值, 代表上内边距, 左右内边距, 下内边距 为指定像素
• 四个值, 代表上, 右,下, 左 为指定像素内边距.

padding会影响盒子的实际大小

如果盒子已经有了宽度和高度, 此时再指定内边距, 会撑大盒子.

解决方案

如果保证盒子跟效果图大小保持一致, 则让width/height减去多出来的内边距大小即可

如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小