margin:5px 0; 和 margin:5px 0 0; 是什么意思？

Question

margin:5px 0; 的意思是 margin:5px 0 5px 0; 还是 margin:5px 0 0 0;？

margin:5px 0 0; 的意思是 margin:5px 0 0 0; 吗？

内边距（padding）也同样如此。

另外，这个在所有浏览器中是否一致（包括IE6）？

- Darryl Hein

Answer 1

根据Box Model：

• 如果只有一个值，则应用于所有边缘。
• 如果有两个值，则上和下的margin设置为第一个值，左和右的margin设置为第二个值。
• 如果有三个值，则上的margin设置为第一个值，左和右的margin设置为第二个值，下的margin设置为第三个值。
• 如果有四个值，则分别应用于上，右，下和左的边缘。

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 */

这是由 CSS 标准定义的，因此在正确实现 CSS 的所有浏览器中应该保持一致。如需了解浏览器兼容性，请查看 blooberry 的 CSS 支持历史 和 quirksmode。根据 blooberry 的说法，margin 首次在 IE3 中实现，因此 IE6 应该可以正常使用。

- Eugene Yokota

---

每个浏览器都遵循这个想法吗？ - Darryl Hein

呃，不确定“标准”是否适用于所有浏览器……但我希望如此。 - Darryl Hein

边距一直以这种方式实现。这对所有仍在使用的浏览器都应该有效。 - Eugene Yokota

Answer 2

对于边距和填充，您可以指定一个、两个、三个或四个由空格分隔的值：

1. 一个值：所有四个边使用该值。
2. 两个值：上/下边缘获得第一个值；左/右边缘获得第二个值。
3. 三个值：上边缘获得第一个值，左/右边缘获得第二个值，下边缘获得第三个值。
4. 四个值：顶部、右侧、底部、左侧（即从正午开始顺时针方向）分别获取每个值。

- JasonSmith

Answer 3

margin: 5px 0; 的意思是 margin: 5px 0 5px 0;

margin: 5px 0 0; 的意思是 margin: 5px 0 0 0;

所有浏览器都遵循这个规则，包括IE6。

- Paul D. Waite