处理CSS margin/padding“冲突”的最佳做法是什么？

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假选择器在最后一个label标签上给出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）就可以。