我应该给第一个元素一个右边距还是第二个元素一个左边距？

Question

这是一个非常基本的CSS设计问题。

当我有两个块元素时

+----------+    +----------+                      
|~~~~~~~~~~|    |**********|                      
|~~~~~~~~~~|    |**********|                      
|~~~~~~~~~~|    |**********|                      
+----------+    +----------+                      

我想在它们之间设置空间，有三种可能性：

1. 右边距左侧块
2. 带左边距的右侧块
3. 两个区块的保证金

每个人的利弊是什么，最重要的是 - 考虑什么 最佳实践？

Answer 1

没有任何利弊，这完全取决于你的设计，你想要的是什么，使用margin-right将使最后一个元素margin-right没有充分的理由，所以说，例如，你有三个框，浮动到左边，或者显示inline-block因此，由于右边距，最后一个框不会触及模板的最右边，而是会包裹并向下移动。

你看到红色空间，最后一个元素是margin-right，你不需要它。更多移动会导致div向下移动。

解？

如果您愿意支持旧版浏览器，请为最后一个元素分配一个类并编写margin-right: 0;，假设您有3个li元素已浮动，那么您将编写

ul.class_name li.class_name {
   margin-right: 0;
}

否则，您可以使用:last-child伪来消除额外的保证金。

所以它将是

ul.class_name li:last-child {
   margin-right: 0;
}

左边会有同样的事情，但不是使用:last-child和margin-right，而是需要分别使用margin-left和:first-child。

---

最后但并非最不重要的是，在两侧都使用边距会在两侧产生空间，导致布局迷失方向。

在上述情况下，您必须同时使用两者，将类分配给第一个和最后一个元素，或者您需要使用:first-child和:last-child来删除margin第一个元素的left和最后一个元素的margin的{​​{1}}。

  

结论：对于你拥有的两个盒子，你应该使用right   并使用margin-right或class删除附加内容:last-child   最后一个元素。

Answer 2

选择一个方向（边距左边距或边距右边）并在整个项目中坚持下去通常是一个好主意，因此设计将更容易，更一致。

有关此主题的更多信息，请阅读此博文：Single-direction margin declarations

那就是说，盒子左边的边距意味着“我不想太靠近我之前的盒子”，而边缘右边的意思是“我不希望其他盒子离我太近”。

因此，在默认情况下盒子具有边距的设计中，使用margin-right（和margin-bottom）以及默认情况下盒子没有边距的设计，在几个盒子上使用margin-left（和margin-top）保证金。如果是混合的，请选择与您最相关的方向并坚持下去。

Answer 3

这取决于您将使用它的方式以及您将如何使用它没有确切的规则。但是，如果您将某些网格系统用于元素，则最佳做法。如果您的元素不适合网格系统，您可以使用任何方法。

P.S。还有另一种可能性在我猜之后或之前使用伪元素。

Answer 4

简单答案：取决于

这一切都取决于你想要做什么，以及那些是什么元素。

例如，如果您的站点位于左侧，并且这两个浮动div具有相同的类，则您不希望使用margin-left，因为这会在左侧引入一些空间第一个街区。

向两个元素添加边距显然毫无意义，除非您有可能出现在其间的动态内容。

因此，除了您希望页面具有明显的样式方式之外，性能没有差异，但主要是代码的可读性