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

（当然在原始代码中有相应的输入。）建议用于防止边际崩溃的措施都没有帮助。这个效果的解释是什么？我该如何解决？

Answer 1

默认情况下，<label>有display:inline。将其更改为display: inline-block，然后转到＆＃34;折叠填充＆＃34; 。

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

line-height可以用任何＆＃34;长度＆＃34;类型的CSS单位（px，em，in，...）表示，但是，与其他长度属性不同，接受无单位值，考虑它们em。

Answer 2

这不是折叠边距问题（甚至是折叠填充）。 <label>没有为其设置行高，因此您只需设置适当的行高，例如line-height:1.5;

如何防止崩溃填充

2 个答案: