处理CSS边距/填充"冲突"的最佳做法是什么？

Question

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

问题是我的底部然后以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),那就没问题了.