1

Gaze upon this example HTML/CSS, and observe how Chrome (v110) and Firefox (v108) render them differently.

* {border:0; margin:0; padding:0; vertical-align:baseline;}
details {margin:0;}
details summary {margin: 1em 0 1em 1em;}
<details>
  <summary>First</summary>
</details> 
<details>
  <summary>Second</summary>
</details>

The first <details> tag is notably empty except for its <summary>. As best I can figure, Chrome is deciding to margin collapse the bottom margin of the first <summary> with the top margin of the second <summary> only when the <details> is open, whereas Firefox collapses them in either case. I'm building a semantic "template", so I'd like to know how to write the CSS to be Firefox/Chrome agnostic. I want:

  • The opening/closing of <details> that are empty except for their <summary> to not affect the spacing/margins at all.
  • Consistent margins between open, empty <details> and closed <details>.

How do you write CSS that will render the HTML consistently?

Researching this browser discrepancy, it appears Firefox is the one out of compliance with the W3 standards. See this potentially related CSS margin test. Collected potentially relevant reading here:

Mike Pierce
  • 1,390
  • 1
  • 12
  • 35

1 Answers1

1

Differences in Firefox/Chrome aside, there's a way to avoid this issue altogether.

Declare no margins in <summary>; instead put them in <details>.

details {margin: 1em 0 1em 1em;}
details summary {margin:0;}

This makes sense, because <details> is the "block" element here, and should be handling the margins relative to any other block elements in your HTML. The <summary> tag has default value display:list-item;—it's really just intended to contain some text or something to click to expand the details.

Mike Pierce
  • 1,390
  • 1
  • 12
  • 35