CSS margin的顺序

Question

CSS中写边距的顺序是什么？ 例如：

div
{
    margin: 20px 40px 30px 50px;
}

这些中哪一个代表了距离顶部、底部、左侧和右侧的边距？

- Malwinder Singh

---

规范中已经明确说明了。你需要有时间去阅读它。 - Rob

这不应该是一个问题。在谷歌搜索“css margin”时，第一个搜索结果就返回了这个。 - James Korden

http://www.w3.org/TR/CSS21/box.html - Rob

记忆提示：它像一只时钟，从12点开始顺时针转动…… - Kai Mattern

Answer 1

margin: top right bottom left //4 parameters 10px 12px 13px 15px
margin: top horizontal bottom //3 parameters 10px 12px 13px, gives left & right same margin of 12px
margin: vertical horizontal //2 parameters 10px 20px, gives 10px for top/bottom and 20px for left/right

- Roi

---

你能否详细说明一下？ - Malwinder Singh

Answer 2

CSS Margin是按顺时针方向工作的。

例如，如果我要为一个类名为"marginAll"的 div 元素设置以下 margin。

<div class="marginAll"> </div> 并且CSS如下：

.marginAll{
   width: 50px;
   height: 50px;
   background-color: red;
   margin: 10px 30px 10px 30px ;
 }

所以这段代码将创建一个宽度和高度均为50像素、背景颜色为红色的div。 这里的margin属性作用是距离顶部10像素，距离右侧30像素，距离底部10像素，距离左侧30像素。

- Sonu

Answer 3

它从上 -> 右 -> 下 -> 左进行

您可以查看CSS技巧作为参考

诀窍是单词中的前四个辅音字母是“Top”，“Right”，“Bottom”和“Left”的首字母

容易记住

TRouBLe

所以

margin: 20px 40px 30px 50px; // 20px=top 40px=left 30px=bottom 50px=right

- user3414693

Answer 4

你可以使用任何一种方法。

CSS

margin : 1px 2px 3px 4px ; // 1=top 2=right 3=bottom 4=left

margin : 1px  2px 3px; // 1=top 2=(left and right) 3=bottom

margin : 1px  2px ; // 1=(top and bottom) 2=(left and right)

- wikijames

---

你的第一个例子是不正确的 - 值应该按顺时针方向从顶部开始读取：上、右、下、左。 - Rich Turner

你说得对，我刚刚看到了。我想当我写的时候，在我的脑海中把它反过来了。谢谢你。 - wikijames

Answer 5

CSS margin 的顺序是：

上-右-下-左

- Rupesh Shitole

Answer 6

它从顶部开始顺时针旋转。 顶部 -> 右侧 -> 底部 -> 左侧

- John

Answer 7

它是从顶部开始顺时针方向。

顶部 > 右侧 > 底部 > 左侧

- Rishabh Shah

Answer 8

顶部 -> 右侧 -> 底部 -> 左侧

一个好记的方式是 TRouBLe。

- jacobsvensson