details与summary元素间多余空白的原因及解决方法

我使用如下代码结构：

CSS代码：

details {
    padding: 1px;
    background: yellow;
}
details summary > * {
    display: inline;
}
summary {
    height: 50px;
    list-style-type: none;
}
summary img {
    height: 25px;
}

HTML代码：

<details class="tile" id="first">
    <summary class="summary1">
        <div>
            <h3>Title<small> – subtitle</small></h3>
<!--                <img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/icon-48.png">-->
        </div>
    </summary>
<div>
    <dl>
        <dt>Prop1</dt><dd>Proin velit dignissim oporteat dicam. Ante quo adversarium posuere neque dictumst. Felis civibus blandit dicit sociis dapibus morbi necessitatibus dapibus eum.</dd>
        <dt>Prop2</dt><dd>........</dd>
        <dt>Prop3</dt><dd>2.......</dd>
    </dl>
</div>
</details>

可见，虽未为details和summary设置对应内边距或外边距，二者上边缘间仍存在空白。请问该现象成因是什么？如何解决？我了解summary嵌套块元素的特殊行为，但包裹div的方案在我的场景中无效。

成因分析 #

这个空白是浏览器默认样式加外边距折叠共同导致的：

1. <summary>默认是display: list-item，哪怕你设了list-style-type: none，内部还是有个隐藏的列表标记盒，会带来额外间隙；
2. 嵌套的<h3>自带默认margin-top，虽然你把summary子元素设为inline，但h3的块级属性仍会触发外边距折叠，和summary的默认间隙叠加后就出现了明显空白。

解决办法 #

只需两步就能彻底消除空白：

1. 重置summary的默认内外边距，把display改成block，彻底移除列表标记盒的影响：

summary {
    height: 50px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: block; /* 替换默认的list-item */
}

2. 清除h3的默认上边距，避免外边距折叠：

summary h3 {
    margin-top: 0;
}

把这两段样式加到你的代码里，就能解决上边缘空白问题。

内容的提问来源于stack exchange，提问作者Tobias Wohlfarth