15

当我想在（逻辑）容器 div 中放置一些（逻辑上有意义的）div 时，如下所示，

div内的div带空格

这两种方法中哪一种在逻辑上更正确？

  • 设置容器的 padding 属性
  • 设置内部 div 的 margin 属性

有时，我在容器中有多个元素，如下所示：

容器 div 中的多个 div

对于这种情况，我需要独立于元素周围的空间设置元素之间的空间。对于中间的空间，我不能使用容器的填充属性，我必须使用内部元素的边距（-left 或 -right）。考虑到这一点，为了设置容器和元素之间的空间，我想知道设置元素的边距（-left，-right，-top，-bottom）还是容器的填充更有意义.

我使用弹性盒子。而且我也有设置为box-sizing: border-box;。nth-child如有必要，我可以自由使用 CSS 选择器。

4

4 回答 4

10

考虑您要添加哪种类型的排水沟。是否将元素彼此分开？是在元素内部创建空间吗？

对于元素所有侧面的排水沟，例如您的示例中的蓝色：

在此处输入图像描述

在这里，我会在容器上使用填充。从逻辑上讲，这正是我想要的，那么为什么还要考虑其他事情呢？

对于一行元素之间的间距，例如第二个示例中绿色元素之间的空间：

在此处输入图像描述

在这里，我会在绿色元素上使用边距。它们之间显然有一个边距，所以填充没有多大意义。

但是，当您同时使用这两个示例时，它们会产生一个问题，即绿色元素的边距可能与其父元素的填充冲突。我通过删除第一个和最后一个孩子的边距来管理这个。

此外，您可能希望在新行中添加更多这些精细的绿色元素。我通常使用一个元素来清除每一行，该元素使用任何适当的方法来清除浮动，因此用一个边距分隔行是很有意义的。显然，这里也出现了与父级填充相同的冲突，但它很容易以相同的方式处理（即，从最后一行删除边距）。

所以，简而言之：

  • 在父元素上填充其边缘和子元素之间的间距。
  • 边距以将具有相同父级的元素彼此分开。
  • 当其边距连接到父级的填充（一行中的第一个和/或最后一个子级，列中的最后一个子级）时，从所述子级删除边距。

免责声明：这就是我做事的方式。我不能保证这是最有效的做事方式，但它对我来说是最有意义的方式。

于 2013-06-02T08:22:59.367 回答
5

div我更喜欢在容器内设置边距。

假设下面的黑色是带有和的div外部容器。当您将填充分配给外部时，这将导致宽度和高度。鉴于您不会期望容器拉伸，这将影响容器 div 周围的元素。因此，最好在内部使用边距。display: flexwidth: 300pxheight: 200pxpadding: 30pxdiv360px260pxdiv

在此处输入图像描述

当您在内部div和容器之间分配边距时，实际的外部div不会移动，边距只会影响内部div，因此不会影响它周围的元素。

如果你正在使用，box-sizing: border-box;那么事情会相应地改变，所以这完全取决于元素的实际大小。在内部元素上使用边距/填充将是正确的方法。

于 2013-06-02T08:00:37.943 回答
3

对此没有硬性规定，因为这完全取决于上下文，在复杂的设计中，您通常别无选择，只能使用其中一种来获得所需的结果。

也就是说，您应该尝试将逻辑相关的规则组合在一起。例如，当您在网站上有两个用于类似目的的 HTML 元素时，例如您的外部<div>和另一个类似的框（应该没有填充），那么，在其他条件相同的情况下，最好在内部设置 a 。margin<div>

但是，如果您将多个元素放入外部<div>，那么您实际上应该使用填充，因为它会同时处理所有内部元素。@zzzzBov 的答案也有效，但它依赖于边距折叠，这可能很难处理。

编辑：在您的第二种情况下，我通常将 and 结合起来padding，margin如下所示：

.outer {
    padding: 10px 15px 10px 5px
}

.inner {
    margin-left: 10px
}

可能看起来很复杂，但无论保证金是否崩溃都能正常工作，并且对我很有帮助。

于 2013-06-02T08:06:41.433 回答
2

这取决于您的后续内容应如何呈现。如果您要让多个内部<div>s（绿色）以相似的间距分隔，那么使用margin边距折叠允许 div 呈现为：

+-------
|        <- blue
|  +----
|  |     <- green
|  |
|  +----
|
|  +----
|  |     <- green
|  |
|  +----
|
+-------

下面是一些不同选项的示例。

于 2013-06-02T07:57:51.527 回答