Question

我有<div>，padding{0.5em}。里面是一堆<label>个，其中包含表单字段等，设置为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，但它看起来很混乱，只要我想在div的顶部添加（例如）<h2>就会崩溃。

理想情况下，我希望将子元素的第一个上边距和最后一个下边距设置为“折叠”，不知何故。

谢谢！

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）就可以了。