0

I have the following structure:

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

As you can see there is some space between the upper edge of the details element and the upper edge of summary, although that don't specify any matching padding or margin on those.

Why is these and how can i avoid this? I'm aware of the specific behavior of block elements nested in a summary, but the prosed solution doesn't seem to work with my case. (Wrapping all the elements in a div)

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Tobias Wohlfarth
  • 56
  • 7
  • 1
    default margin of h3 – Temani Afif Jun 11 '23 at 13:55
  • Ok i dumb. I forgotten this weird thing with margins of child affecting the Parent Box. I only looked at the live overlays from developertools directly in the viewport, not at the css values in the sidebar; apparently i still have to learn a lot. – Tobias Wohlfarth Jun 11 '23 at 14:23

0 Answers0