CSS 做什么 margin:5px 0; 和边距:5px 0 0; 意思?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/819207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What do margin:5px 0; and margin:5px 0 0; mean?
提问by Darryl Hein
Does margin:5px 0;
mean margin:5px 0 0 0;
or margin:5px 0 5px 0;
?
是否margin:5px 0;
意味着margin:5px 0 0 0;
还是margin:5px 0 5px 0;
?
Does margin:5px 0 0;
mean margin:5px 0 0 0;
?
是否margin:5px 0 0;
意味margin:5px 0 0 0;
?
Same for padding of course.
当然,填充也一样。
Also, is it consistent across all browsers (including IE6)?
此外,它是否在所有浏览器(包括 IE6)中保持一致?
回答by Eugene Yokota
According to Box Model:
根据盒子模型:
- If there is only one value, it applies to all sides.
- If there are two values, the topand bottommargins are set to the first value and the rightand leftmargins are set to the second.
- If there are three values, the topis set to the first value, the leftand rightare set to the second, and the bottomis set to the third.
- If there are four values, they apply to the top, right, bottom, and left, respectively.
- 如果只有一个值,则它适用于所有方面。
- 如果有两个值,在顶部和底部边距设置为第一个值,右和左页边距设置为第二。
- 如果有三个值,所述顶部被设置为所述第一值,则左和右被设置为第二和底部被设定为所述第三。
- 如果有四个值,它们分别适用于top、right、 bottom和left。
body { margin: 2em } /* all margins set to 2em */
body { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
This is defined by the CSS standard, so it should be consistent across all browsers that implements CSS correctly. For browser compatibilities, check out blooberry's CSS Support Historyand quirksmode. According to blooberry, margin
was first implemented in IE3, so IE6 should be fine.
这是由 CSS 标准定义的,因此它应该在所有正确实现 CSS 的浏览器中保持一致。有关浏览器兼容性,请查看 blooberry 的CSS Support History和quirksmode。根据 blooberry 的说法,margin
最初是在 IE3 中实现的,所以 IE6 应该没问题。
回答by JasonSmith
For margin and padding, you can specify one, two, three, or four whitespace-separated values:
对于边距和填充,您可以指定一个、两个、三个或四个以空格分隔的值:
- One value: All four sidesuse that value.
- Two values: top/bottomget the first value; left/rightget the second
- Three values: topgets the first, left/rightget the second, bottomgets the third
- Four values: Top, right, bottom, left (i.e. clockwise from noon) get each value
- 一个值:所有四个方面都使用该值。
- 两个值:top/bottom取第一个值;左/右得到第二个
- 三个值:top获得第一个,left/right获得第二个,bottom获得第三个
- 四个值:上、右、下、左(即从中午开始顺时针)获取每个值
回答by Paul D. Waite
margin: 5px 0;
means margin: 5px 0 5px 0;
margin: 5px 0;
方法 margin: 5px 0 5px 0;
margin: 5px 0 0;
means margin: 5px 0 0 0;
margin: 5px 0 0;
方法 margin: 5px 0 0 0;
All browsers follow this, including IE 6.
所有浏览器都遵循此规则,包括 IE 6。