父元素的内边距与子元素的外边距

Question

父元素的内边距与子元素的外边距

htmlcss

15

当我想在逻辑上的容器div内放置一些(有意义的)div并使它们之间有一些空隙时，以下两种方式哪种更为逻辑上正确？

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

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

multiple divs within a container div

对于这种情况，我需要独立地设置元素之间的距离与元素周围的距离。对于元素之间的距离，我不能使用容器的padding属性，而必须使用元素内部的margin(-left或-right)。考虑到这点, 对于设置容器与元素之间的距离，我想知道是设置元素的margin(-left、-right、-top、-bottom)还是容器的padding更为合理。

我使用Flexbox布局，并且还有box-sizing: border-box;的设置。如果有必要，我可以自由地使用CSS选择器，例如nth-child。

- sawa

1

如果子div是唯一的div，那么使用padding是合理的，因为它旁边没有任何其他内容。 - Ali Bassam

2

@AliBassam 但是我认为父级不需要知道它的子级；只有子级自己需要知道。 - bwoebi

2

@sawa 我倾向于关闭这个问题，因为它非常主观。并不存在一个“正确”的答案。 - bwoebi

1

@bwoebi，关于父元素与子元素的关系，还有许多其他属性，例如文本对齐、位置（例如相对位置），我认为应该使用边距来使子元素之间的距离（如果超过一个）。在只有一个子元素的情况下，填充更容易和安全。OP展示的框非常类似于Facebook或Google+上的个人资料图片，他们在div和内部图像之间使用填充，这给人一种图像框架的感觉。 - Ali Bassam

2

@sawa：这是你遗漏的一个非常重要的细节... - BoltClock

显示剩余6条评论

4个回答

5

我更倾向于在容器内部的

上设置边距。

假设下面的黑色

是具有"display:flex", "width:300px"和"height:200px"的外部容器。当你为外部

分配"padding:30px"时，宽度将为360px，高度将为260px。鉴于您不希望容器伸展，这将影响容器周围的元素。因此，在内部

上使用margin会更好。

当您在内部

和容器之间分配margin时，实际的外部

不会移动，并且margin仅会影响内部div，从而不会影响其周围的元素。

如果您使用'box-sizing: border-box;'，则事物将相应更改，因此这完全取决于元素的实际大小。在内部元素上使用margin/padding就是正确的方式。

- Mr. Alien

实际上，我将其设置为 box-sizing: border-box;。 - sawa

@sawa 为什么要改变容器的大小？如果你想要子 div 和容器之间的空间，最好的方法是使用 margin，如果你想保持宽度和高度，否则可以使用 padding，这将添加到内部元素的高度/宽度。 - Mr. Alien

我认为无论盒模型的 box-sizing 属性如何设置，父元素的 padding 和子元素的 margin 都不会增加子元素的宽度和高度。 - sawa

1

我之前对这个答案理解不够透彻，但事实证明，在display: flex元素上设置padding会干扰其大小，因此我必须在内部元素上使用margin。 - sawa

3

这并没有硬性规定，因为所有的结果都取决于上下文和复杂设计中，你通常只有使用其中一个才能得到所需的结果。但是，你应该尝试将逻辑相关的规则组合在一起。例如，当你在网站上有两个用途类似的HTML元素时，比如外部 <div> 和另一个类似的盒子（不应该获得填充），那么，在其他所有条件相同的情况下，最好在内部 <div> 上设置 margin。 然而，如果你将多个元素放入外部 <div> 中，则应该使用填充，因为这可以一次处理所有内部元素。@zzzzBov 的答案也可以，但它依赖于边距折叠，这可能很棘手。

编辑：在第二种情况下，我通常会结合使用 padding 和 margin，像这样：

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

.inner {
    margin-left: 10px
}

可能看起来很复杂，但不管边距折叠的情况如何，它都能正常工作，并且一直以来都表现良好。

- user2444726

2

这取决于您的后续内容应该如何呈现。如果您将有多个内部<div>（绿色）之间隔着相似的间距，那么使用margin就会很有意义，因为边距折叠允许

以以下方式呈现：

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

这里有一些不同选项的示例。

- zzzzBov

1

是的。对于那些担心父元素边距与子元素边距重叠的人来说，如果父元素上有如图所示的边框，则不会发生这种情况。 - BoltClock

好的，OP刚刚提到使用了flexbox。在这种情况下，请注意边距根本不会在flex项目之间折叠。 - BoltClock

抱歉没有提供详细信息。感谢您提供的示例代码。 - sawa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nils Kaspersson · Accepted Answer

考虑要添加的间距类型。是将元素与彼此分开？还是为元素内部创建空间？

对于像你示例中的蓝色元素四周都有间距的情况，我会在容器上使用填充(padding)。从逻辑上讲，这正是我想要的，所以为什么要考虑其他呢？

对于在一行中元素之间的间距，例如第二个示例中绿色元素之间的空间，我会在绿色元素上使用外边距(margin)。显然它们之间有一个边距，因此填充(padding)没有多大意义。

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

此外，您可能希望在新行中拥有更多这样的细长绿色元素。我通常会在整行包装元素上清除浮动，以便使用适当的方法来清除float, 所以在行与行之间使用边距进行分隔是有道理的。显然，在这里也出现了与父级填充(padding)相冲突的情况，但可以以同样的方式轻松处理（即，从最后一行中去掉边距）。

总之: - 对于其边缘和其子元素之间的间距，请在父元素上使用填充(padding)。 - 为相同父级下的不同元素之间分隔使用外边距(margin)。 - 当子元素的外边距与父级填充相连时(一行中的第一个或最后一个子元素，列中的最后一个子元素)，请删除其边距。

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