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

Question

我有一个下拉菜单，其结构如下：

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

​

我已经在内容元素中添加了一些填充，但这会在将其最大高度设置为0(即内容元素关闭且不可见)时产生问题，正如所讨论的here。

前面链接中的解决方案(如下面的代码所示)似乎只适用于div，而不是字段集元素。我确信我可以用另一个包装器来解决这个问题，但是我对我错过的东西很感兴趣，因为我看不到检查员的任何不同之处。毫无疑问，我错过了一些显而易见的事情。

​

    .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中，它可以获得保证金、填充和边框。如果您只是将填充/边距设置为0，边框设置为none，那么它的行为将与您预期的高度为0一样。