填写父母与孩子的保证金

Question

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

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

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

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

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

我使用的是flexbox。我的设置也是box-sizing: border-box;。如果需要，我可以自由使用CSS选择器nth-child。

Answer 1

考虑要添加什么样的装订线。是分开彼此的元素吗？是在元素中创建空间吗？

对于元素四周的装订线，例如示例中的蓝色：

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

---

对于行上元素之间的装订线，例如第二个示例中绿色元素之间的空格：

在这里，我会在绿色元素上使用保证金。它们之间显然存在差距，因此填充并没有多大意义。

---

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

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

所以，简而言之：

• 在父元素上填充其边缘及其子项之间的装订线。
• 保证金与彼此相同的父母分开元素。
• 当其边距连接到父级的填充（连续的第一个和/或最后一个子节点，列中的最后一个子节点）时，从所述子节点中删除边距。

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

Answer 2

我更喜欢在容器内的div上设置保证金。

假设下面的黑色div是包含display: flex，width: 300px和height: 200px的外部容器。当您将padding: 30px填充分配到外部div时，这将导致宽度为360px，高度为260px。鉴于您不希望容器伸展，这将影响容器div周围的元素。因此，最好在内部div上使用保证金。

当您在内部div和容器之间指定边距时，实际外部div将不会移动，并且边距将仅影响内部div，因此不会影响其周围的元素。

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

Answer 3

对此没有严格的规则，因为这完全取决于背景，在复杂的设计中，你通常别无选择，只能使用其中一个来获得理想的结果。

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

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

编辑：在您的第二种情况下，我通常将padding和margin合并，如下所示：

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

.inner {
    margin-left: 10px
}

可能看起来很复杂，但无论边缘崩溃都有效，并且对我很有帮助。

Answer 4

这取决于后续内容的呈现方式。如果您要将多个内部<div> s（绿色）隔开相似的间距，则使用margin是有意义的，以便边距折叠允许div渲染为：< / p>

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

Here is an example of some of the various options