Question

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

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

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

有没有首选的方法呢？我什么时候应该使用一个赞成另一个呢？

Answer 1

通俗地说。

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

如果div中有文本，div的边缘（顶部，右边，底部，左边）和文本之间的空格称为填充。

Answer 2

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

显示差异的图：

enter image description here

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

例如：如果你想定义边框和内容之间的空间，你只能用填充（虽然有一个可见的边框）来实现这个。

Answer 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>

你应该看到边距只是移动div，而填充实际上是使它更大。

使用保证金时，我应该考虑什么？填充空间元素？

3 个答案: