折叠填充的div与填充的字段集

Question

我有一个具有以下结构的下拉菜单：

• 搜索菜单
  • 项目标题
  • 项目内容（这是一个字段集元素）

我在content元素上添加了一些填充，但这会导致在将其max-height设置为0（即content元素关闭且不可见）时引起问题，如here

上一个链接（如下面的代码所示）中的解决方案似乎仅适用于div，而不适用于fieldset元素。我敢肯定我可以使用另一个包装器解决此问题，但是我对遗漏的内容很感兴趣，因为我看不到检查器中的任何差异。毫无疑问，我在这里错过了一些显而易见的事情。

    .div-1, .div-3 {
        padding: 40px;
        border: 1px solid red;
    }

    .div-2, .div-4 {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height: 0px;
        width: 100px;
        background: red;
        overflow: hidden;
    }

    <div class="div-1">
        <fieldset class="div-2">
            Hello!
        </fieldset>
    </div>
    
    <div class="div-3">
        <div class="div-4">
            Hello!
        </div>
    </div>

Answer 1

浏览器根据浏览器为字段集元素提供默认样式。在Chrome中，它具有边距，边距和边框。如果仅将padding / margin设置为0，而border则设置为none，则高度为0时，其行为将与您期望的一样。