在对空间元素使用边距和填充时应该考虑什么？答案

【问题标题】：What should I take into consideration when using margin & padding to space elements?在对空间元素使用边距和填充时应该考虑什么？
【发布时间】：2011-07-11 17:57:06
【问题描述】：

我的任务是修改网站的布局，使其符合客户公司风格指南的标准。

指南要求我确保某些元素与其他元素的间距为 [X]px，并且这种类型的元素与该类型的元素对齐。

因此，当我这样做时，我可以看到现有间距在某些情况下使用padding 定义，而在其他情况下使用margin。

有没有首选的方法？我什么时候应该使用一个来支持另一个？

【问题讨论】：

标签： html css padding margin

【解决方案1】：

通俗地说。

如果你有两个相邻的 div，则两者之间的空间称为边距。

如果 div 中有文本，则 div 的边缘（上、右、下、左）和文本之间的空间称为填充。

【讨论】：

【解决方案2】：

这真的取决于某种方式。边距和填充是两个不同的东西。但在某些情况下，您不会注意到差异。

一张图告诉你区别：

来源：http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/bilder/boxdim.gif

例如：如果您想定义边框和内容之间的空间，您只能通过填充来实现（同时具有可见边框）。

【讨论】：

【解决方案3】：

最好用视觉来解释差异。

试试这个：

<html>
<head>
  <style>
    body { background-color: #E342FF; margin: 0; padding: 0; }
    #mydiv { border: 2px solid #000000; width: 50%; height: 20%; margin: 50px 0 0 50px; }
    #mydiv2 { border: 2px solid #000000; width: 50%; height: 20%; padding: 50px 0 0 50px; }  
</style>
</head>
<body>
<div id="mydiv">
</div>
<div id="mydiv2">
</div>
</body>
</html>

您应该看到，margin 只是在移动 div，而 padding 实际上使它变大了。

【讨论】：