帮你记住 CSS `padding` ,`margin` 属性的简写对应关系

众所周知 padding 是 下面四个属性的简写形式。

• padding-top
• padding-right
• padding-bottom
• padding-left

margin 也是同理。

padding 属性值的设置有多种值的情况。 如：

• 单个值： padding:1px
• 两个值： padding: 2px 4px
• 三个值： padding:2px 4px 8px
• 四个值： padding: 1px 2px 3px 4px.

初学的时候要记得各个值对应的关系，还是要花点时间的。 下面根据我的理解，给出几个记忆的小 Tip。

1. 单值的情况，这个最简单，不用多说，4 个方向的 padding 一律设置成此值。

2. 两个值的情况，记住这是两对值，"上下一对", "左右一对" 也就是说

• 第一个值是用于设置 padding-top 和 padding-bottom
• 第二个值是用于设置 padding-right 和 padding-left

1. 三个值的情况，记住这么一个分组关系。 上、中、下 也就是说。

• 第一个值用于设置 padding-top
• 第二个值用于设置 padding-left 和 padding-right
• 第三个值用于设置 padding-bottom

1. 四个值的情况，这种情况就比较麻烦了，我想不到一个合适的助记词，比如"东西南北" 之类的，因为对不上。还真是麻烦，知道麻烦的英文单词是怎么写的吗？ trouble 对不对？ 四个值的助记单词就是 TRouBLe 了。看我大写的几个字母。 也就是说。

• 第一个值对应 T 即 top 用于设置 padding-top
• 第二个值对应 R 即 right 用于设置 padding-right
• 第三个值对应 B 即 bottom 用于设置 padding-bottom
• 第四个值对应 L 即 left 用于设置 padding-left

margin 是同样的道理就不多说了。

原文链接