3

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

当我有两个块元素时

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

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

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

每种方法的优缺点是什么，最重要的是，什么是最佳实践？

4

4 回答 4

1

通常最好选择一个方向（左边距或右边距）并在整个项目中坚持下去，这样设计会更容易、更一致。

有关该主题的更多信息，您可以阅读此博客文章：单向边距声明

也就是说，box 上的 margin-left 表示“我不想离我前面的盒子太近”，而 margin-right 的意思是“我不希望其他盒子离我太近”。

因此，在默认情况下盒子有边距的设计中，使用margin-right（和margin-bottom），在默认情况下盒子没有边距的设计中，在少数有边距的盒子上使用margin-left（和margin-top）。如果是混合的，请选择对您来说最连贯的方向并坚持下去。

于 2013-10-24T07:58:56.557 回答
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;
}

左边也一样，但你需要分别使用and而不是使用:last-childand 。margin-rightmargin-left:first-child

最后但并非最不重要的一点是，在两侧使用边距会在两侧创建空间，再次导致布局迷失方向。

在此处输入图像描述

在上述情况下，您必须同时使用两者，或者将类分配给第一个和最后一个元素，或者您需要使用:first-childand:last-child来摆脱margin第left一个元素和margin最后right一个元素。

结论：对于您拥有的两个框，您应该使用margin-right 并使用classor:last-child删除margin最后一个元素上的额外内容。

于 2013-10-24T07:47:35.067 回答
0

这取决于您将在哪里使用它以及如何使用它，对此没有确切的规则。但是，如果您将使用某些网格系统作为元素，那么这是最佳实践。如果您的元素不适合网格系统，您可以使用任何方法。

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

于 2013-10-24T07:43:11.857 回答
0

简单的答案：这取决于

这完全取决于您要做什么，以及那些元素是什么。

例如，如果您的网站面向左侧，并且它们是两个浮动 div，具有相同的类，您就不想使用margin-left，因为这会在第一个块的左侧引入一些空间。

显然，为这两个元素添加边距是没有意义的，除非您有可能出现在两者之间的动态内容。

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

于 2013-10-24T07:44:28.273 回答