如何防止折叠填充

Question

直到现在还没有听说过折叠填充，但我遇到了一个奇怪的效果： https://jsfiddle.net/Sempervivum/vbkL69k1/ 当视口变窄使标签环绕时，下方的标签会稍微覆盖上方的标签。

HTML:

<div class="tabbed">
    <label for="tabbed1">Standardfarben1</label>
    <label for="tabbed2">Standardfarben2</label>
    <label for="tabbed3">Standardfarben3</label>
    <label for="tabbed4">Standardfarben4</label>
</div>

CSS:

        .tabbed label {
            border: 1px solid #ddd;
            border-bottom: none;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            padding: 0.25em 0.75em;
            box-shadow: 0 0 0.5em rgba(0,0,0,0.0625);
            background: #fff;
            cursor: pointer;
            box-sizing: border-box;
         }

（当然在原始代码中有相应的输入。） None 为防止利润率崩溃而推荐的措施有帮助。这种效果的解释是什么？我该如何解决？

Answer 1

这不是边距折叠问题（甚至不是填充折叠问题）。 <label>没有设置行高所以你只需要设置一个合适的行高例如line-height:1.5;

Answer 2

默认情况下，<label> 有 display:inline。将其更改为 display: inline-block，然后您的 "collapsing paddings" 就会出现。

虽然 padding 确实会影响元素的外观，但其在内容流中的计算高度取决于 line-height 值。您可以手动调整属性以适应可能的填充行项目，因此它们永远不会重叠，或者您使用 display:inline-block.

line-height 可以用任何 "length" 类型的 CSS 单位表示（px、em、in、... ) 但是，与其他长度属性不同，接受无单位值，考虑到它们 em.

如何防止折叠填充

How to prevent collapsing paddings

css

padding

overlap