这是一个非常基本的 CSS 设计问题。
当我有两个块元素时
+----------+ +----------+
|~~~~~~~~~~| |**********|
|~~~~~~~~~~| |**********|
|~~~~~~~~~~| |**********|
+----------+ +----------+
而我想设置它们之间的空间，有三种可能：
每种方法的优缺点是什么，最重要的是考虑了什么 最佳实践？
【问题讨论】：
这取决于您将在哪里使用它以及如何使用它，对此没有确切的规则。但是，如果您将使用一些网格系统作为元素，那么这是最佳实践。如果您的元素不适合网格系统，您可以使用任何方法。
附：还有另一种可能在我猜之后或之前使用伪元素。
【讨论】：
这完全取决于你想要做什么，以及那些元素是什么。
例如，如果您的网站面向左侧，并且它们是两个浮动 div，具有相同的类，您就不想使用 margin-left，因为这会在第一个的左侧引入一些空间块。
显然，给两个元素添加边距是没有意义的，除非你有可能出现在两者之间的动态内容。
因此，除了您希望页面具有明显的样式方式之外，性能没有差异，但主要是代码的可读性
【讨论】：
没有优缺点，这完全取决于你的设计，你想要什么，使用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;
}
左边也一样，但是你需要分别使用margin-left和:first-child而不是使用:last-child和margin-right。
最后但并非最不重要的一点是，在两侧使用边距会在两侧创建一个空间，再次导致布局混乱。
在上述情况下，您必须同时使用这两个元素，或者将类分配给第一个和最后一个元素，或者您需要使用:first-child 和:last-child 来摆脱left 上的margin 首先元素和 margin 上的 right 最后一个元素。
结论：对于你拥有的两个盒子，你应该使用
margin-right并使用class或:last-child删除多余的margin最后一个元素。
【讨论】：
通常最好选择一个方向（左边距或右边距）并在整个项目中坚持下去，这样设计会更容易、更一致。
有关该主题的更多信息，您可以阅读这篇博文：Single-direction margin declarations
也就是说，box 上的 margin-left 表示“我不想离我前面的框太近”，而 margin-right 的意思是“我不希望其他框离我太近”。
所以在默认情况下盒子有边距的设计中，使用margin-right（和margin-bottom），在盒子默认没有边距的设计中，在少数几个盒子上使用margin-left（和margin-top）一个边距。如果是混合的，请选择您认为最连贯的方向并坚持下去。
【讨论】：
top和left而废弃bottom和right吗？