CSS边距和内边距的缩写属性顺序助记符

Question

我总是记不住设置margin或padding的缩写属性顺序。具体来说：

margin-top:    2px;
margin-bottom: 4px;
margin-left:   3px;
margin-right:  8px;

可以写成

margin: 2px 8px 4px 3px;

是的，我知道人们可以通过想象一个时钟并从中午开始顺时针移动来可视化顺序。但是我经常忘记。我需要用文字回忆顺序：上、右、下、左。

因此，T R B L。

可能像这样 [R-名词] [B-动词] [L-名词] 是正确的方法，但我感到缺乏灵感。如果有人遇到了对此有用的助记符，我很乐意听听。就像一个好的梗一样，我相信一旦我把它牢牢地记在脑海里，我就不太可能会忘记它。

- dland

---

对于熟悉模拟时钟的人来说，这太过复杂了。像单词和首字母缩写这样的抽象概念对人类思维来说并不自然，记住 T R B L 然后手动将每个字母转换为实际方向会让生活变得更加复杂，而且在我看来没有必要。更好的方法是通过视觉来记忆顺序，在这种情境下你正在使用视觉媒介:D。 - mahemoff

还应该记住如果只给出两个或三个值会发生什么。例如，“margin: 3em 5em;”和“margin: 3em 5em 6em;”。在第一个示例中，3em用于顶部和底部，而5用于左右两侧。在第二个示例中，3用于顶部，5用于左右两侧，6用于底部。我认为如果只给出一个值，记住会发生什么很容易。 - Harry Pehkonen

我喜欢这些答案，但由于你的处理方式，这肯定是最荒谬的问题。你用名词和动词完全把我弄懵了。这只是一个盒子，在里面放个钟就行了。 - Eric Bishard

Answer 1

如果你做错了，就会出现问题。

- Paul Dixon

---

去除元音后不难记忆。 - zzapper

哎呀——天哪。我搞错了，把辅音字母删掉了。 - Yaakov Belch

https://css-tricks.com/remember-the-order-of-marginpadding-shorthand-with-trouble/ - Ryan Williams

Answer 2

实际上，时钟方式非常完美。 这是我至少觉得最直观的记忆方式。

- Yuval A

---

它也可以以图像的方式工作...大多数情况下，你会按照视觉线路思考。 - Armstrongest

Answer 3

疑难的矩形边框逻辑？

- Paul Dixon

---

我之前没听过这个，但我喜欢它 :) - Adam Rezich

Answer 4

为什么不仅记住顺序是从顶部开始按顺时针方向：

TOP（上） -> RIGHT（右）-> BOTTOM（下）-> LEFT（左）

- Steve

Answer 5

又一次尝试:

暴龙：大蜥蜴

- Paul Dixon

Answer 6

真正的大勒布斯基

- Paul Dixon

Answer 7

只需顺时针思考，这是最简单的方法。从上方开始并依次绕过... 比一些愚蠢的短语容易记忆（前提是您知道如何读时钟...）

- Logan Serman

Answer 8

转变。

- Unniloct

Answer 9

时间轮换，有点无聊？

- Paul Dixon

Answer 10

尝试用烤牛肉剩菜吗？

- Paul Dixon