css - 如何修复折叠的顶部和底部边距？

Question

我是 CSS 新手，我正在尝试了解如何修复以下行，使其不适用于顶部和底部边距。它适用于侧边距，但是：

.contents {
    ...
    margin: 10px 10px 10px 10px;
}

我该如何解决？

编辑：

我也尝试过填充容器，这只是将容器扩展到最大尺寸（为什么？）：

.container {
    ...
    padding: 10px 10px 10px 10px;
}

score 10 · Accepted Answer

用于overflow:auto与折叠有关的任何元素。例如：

article {
    overflow:auto;
}

score 4 · Accepted Answer

该答案基于您提供的小提琴。

我认为您的方法是不正确的，因为您在父标签article内应用了边距以将其隔开。div在这种情况下最好使用填充，因为您试图将内容与其外部边界分开。所以申请：

article {
  //display: block;
  clear: both;
  padding: 10px;
}

这将导致article标签的大小增加，但是容器div元素的边框现在将相互接触。为了在元素之间创建空间，margin应用了 a。

.rounded-box {
  background-color: #959392;
  border-radius: 15px;
  margin: 10px 0px;
}

工作示例 http://jsfiddle.net/LCTeU/4/

因此，回顾一下，当您想在两个元素之间创建空间时，请使用margin. 当你想在一个元素和它的边界之间创建空间（或者你希望一个元素被空格包围）时，使用padding.

score 3 · Accepted Answer

我找到了一个不需要填充且不需要更改overflow容器元素的修复：

article:after {
    content: "";
    display: block;
    overflow: auto;
}

这个想法是我们在底部添加另一个元素来破坏折叠边距，而不影响高度或填充。

score 0 · Accepted Answer

根据 Erik Rothoff 建议的修复，这似乎在 Safari 中不起作用，首先我尝试了以下操作：

article:after {
    content: "";
    display: inline-block;
    overflow: auto;
}

这在 Safari中确实有效，但占用了我无法摆脱的空间，把网格弄乱了，以至于我需要更改边距。

然后我决定通过执行以下操作将两者结合起来：

article:after {
    content: "";
    display: block;
    padding-top: 1px;
    margin-top: -1px;
}

这适用于 Safari，可接受的高度为 1px，被负边距顶部否定。

4 回答 4