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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2385 天前的主题，其中的信息可能已经有所发展或是发生改变。

众所周知 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。

单值的情况，这个最简单，不用多说，4 个方向的 padding 一律设置成此值。
两个值的情况，记住这是两对值，"上下一对", "左右一对" 也就是说

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

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

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

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

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

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

原文链接

padding

设置

用于

值

20 条回复 • 2018-06-02 05:40:40 +08:00

hahastudio

2018-06-01 16:09:16 +08:00 via Android

难道不是顺时针么？

banxi1988

2018-06-01 16:14:03 +08:00

@hahastudio TRBL 也是顺时针啊。

ooops

2018-06-01 16:15:57 +08:00

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

littleylv

2018-06-01 16:16:18 +08:00

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

torbrowserbridge

2018-06-01 16:18:38 +08:00

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

f2f2f

2018-06-01 16:30:17 +08:00

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

yyfearth

2018-06-01 17:05:04 +08:00

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

ccbikai

2018-06-01 17:08:41 +08:00 via iPhone

上右下左

agdhole

2018-06-01 17:14:41 +08:00

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

SourceMan

2018-06-01 17:24:55 +08:00

不是顺时针吗？

yinanc

2018-06-01 17:26:57 +08:00 via iPhone

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

napsterwu

2018-06-01 17:54:53 +08:00 via iPhone

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

KimJongun

2018-06-01 17:56:20 +08:00

所以看不懂前端

jasperjia

2018-06-01 17:58:04 +08:00

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

iTakeo

2018-06-01 19:11:44 +08:00 via iPhone

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

moxiaonai

2018-06-01 19:59:30 +08:00

顺时针不好记

ChiangDi

2018-06-01 20:07:51 +08:00

上右下左不好记？

bojackhorseman

2018-06-01 22:05:27 +08:00 via Android

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

dobelee

2018-06-01 22:08:01 +08:00 via Android

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

lightening

2018-06-02 05:40:40 +08:00

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