html - 处理 CSS margin/padding "conflicts"的最佳实践是什么？

Question

我有一个 <div> , 与 padding{0.5em} .里面是一堆 <label>带有表单字段等的 s，设置为 display:block;margin:0 0 0.8em , 在它们之间留出一点空间。

问题是我的 div 的底部最终以 1.3em 的有效填充底部结束。

最好的解决方案是什么？

我可以将 div 的内边距设置为 0.5em 0.5em 0 0.5em将问题从 1.3em“改善”到 0.8em，但它仍然不是应有的 0.5em。不允许使用负填充值。

我显然可以使用 :last-child伪选择器给出 margin-bottom在最后一个标签标签上为 0，但我觉得必须有一种更整洁/更容易/更易于维护的方法吗？

我可以设置 margin:0.4em 0和 padding:0.1em 0.5em , 但它看起来很乱，一旦我想添加(例如)一个 <h2> 就崩溃了在 div 的顶部。

理想情况下，我希望以某种方式将子元素的第一个顶部和最后一个底部边距设置为“折叠”。

谢谢!

Answer 1

我的做法是添加一个 margin-top在标记中另一个元素/选择器之后的任何标签上，而不是 margin-bottom在所有这些上。

例如，如果您交替使用 <label>和 <input>元素:

<div>
  <label>
  <input>

  <label>
  <input>
</div>

...然后我将使用相邻的兄弟选择器来仅定位输入后面的标签，从而忽略第一个输入:

input + label {
  margin-top: 0.8em;
}

也就是说，如果标记不允许该模式，:last-child (或者更好，:last-of-type)就可以了。