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

[banxi1988]

众所周知 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 是同样的道理就不多说了。

原文链接

[hahastudio]

难道不是顺时针么？

[banxi1988]

@hahastudio TRBL 也是顺时针啊。

[ooops]

@hahastudio 我也想说。trouble 貌似更难记了。。。

[littleylv]

我能说其实这个很好记么。

[torbrowserbridge]

水这么多就是为了最后的链接么。

[f2f2f]

上右下左……这个很难记吗？

[yyfearth]

同意楼上 只要记住顺时针 “上右下左” 就够了
如果少了最后一个左 那么就用右的值
如果还少了一个下 那么就用上的值
如果只有一个值 当然就全部都用了

[ccbikai]

上右下左

[agdhole]

上右下左
我一般都是直接写明 -right

[SourceMan]

不是顺时针吗？

[yinanc]

这还要记的吗…多写两次就记住了，现在半年没写 css 了都还没忘

[napsterwu]

两年没写了都还记得上右下坐… 记这玩意就跟奇变偶不变差不多道理

[KimJongun]

所以看不懂前端

[jasperjia]

秒表怎么转，一下子就记住了

[iTakeo]

写这么一大堆，一句：上右下左，不是更好么？

[moxiaonai]

顺时针不好记

[ChiangDi]

上右下左 不好记？

[bojackhorseman]

写多了就记住了，因为有很多地方都是这个规矩，border 等等

[dobelee]

可怕。我看一眼就記了快 10 年，看完你這帖子，我立馬懵逼了。。。

[lightening]

不就是顺时针转吗？没设置的就取对面。哪有这么麻烦？！