css - 如何防止折叠填充

Question

到现在为止从未听说过折叠填充，但我遇到了一个奇怪的效果: https://jsfiddle.net/Sempervivum/vbkL69k1/ 当视口(viewport)变窄以便标签环绕时，下方的标签会稍微覆盖上方的标签。

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;
         }

(当然在原始代码中有相应的输入。) 为防止利润率崩溃而推荐的措施均无济于事。 这种影响的解释是什么？我该如何解决？

Answer 1

默认情况下，<label>我们有display:inline .将其更改为 display: inline-block 那里是你的“折叠填充”。

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

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