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

问题描述：

我的任务是修改网站的布局，使其符合客户企业风格指南的标准。在空间元素中使用边距和填充时应该考虑什么？

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

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

是否有这样做的首选方式？我应该什么时候使用一种而另一种？

答

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

这个数字显示了区别：

enter image description here

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

因此，例如：如果要定义边框和内容之间的空间，你只能做到这一点与填充（虽然有一个可见的边框）。

答

通俗的说法。

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

如果div中有文本，则div（顶部，右侧，底部，左侧）和文本之间的间距称为填充。

答

这个区别最好在视觉上解释。

尝试了这一点：

<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，并填充实际上使它更大。

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

相关推荐