The problem of the LI element in a "normalize" context.

[bennadel]

@argyleink I'm completely fascinated by your use of flex and grid to space content blocks (headers, paragraphs, blockquotes, etc). But, I'm having trouble reconciling the technique with the li element. Since the li has a display:list-item, which has a special meaning (gives the element its marker), I can't just change the default display to flex in order to allow for proper spacing of nested paragraphs:

<li>
   <p>text....</p>
   <p>text....</p>
   <p>text....</p>
</li>

I could wrap the inner-content in a host element to apply the spacing:

<li>
   <div class="spacer">
      <p>text....</p>
      <p>text....</p>
      <p>text....</p>
   </div>
</li>

Which works if I have complete control over the content. But, imagine that this context also has to contend with user-provided content. In that, perhaps the content being rendered is something like this GitHub Issue content. A user wouldn't know to wrap list item content in a spacer.

Which then leads me to thinking that if I have to render user-generated content in an app, I'm going to just have to rely on native margin collapsing and revert back to use of things like :first-child, :last-child, :first-of-type shenanigans to make sure margins work well in all kinds of scenarios. And, if that's the case, is going down the flex/grid based margin technique moot?

To be clear, I understand that I can still use this technique in contexts that I totally control. But, the question is, if an application has to render user content, and I have to have a more natural / native way to control the margins within that user content, does it even make sense to mix-and-match more free-flowing content areas.

I've been going through your normalize.css, and when I see this block, I get the sense that you're also struggling with the same thing:

:where(dt:not(:first-of-type)) {
  margin-block-start: var(--size-5);
}

... which falls down a bit if you wrap your dt/dd pairs in a wrapper (now allowed by the spec as far as I know):

<dl>
   <div>
      <dt>...</dt>
      <dd>...</dd>
   </div>
   <div>
      <dt>...</dt>
      <dd>...</dd>
   </div>
</dl>

In this case, none of the dt get a margin because they are all :first-of-type.

Apologies for the long, rambling question - I'm sure that I haven't well articulated my question. Ultimately, I'm trying to understand how to best manage margin in a robust application; and, after 25-years in this business, I still feel like I'm trying to figure it out. And when I saw your use of flex/grid to space content, I thought that "the one weird trick"; but, then I remembered the li and it all sort of unravelled.

Just looking for some advice. Thanks!

[argyleink]

Hi Ben!

my strategy is: use gap as often as possible but don't feel bad if there are scenarios where margin are needed.
rest peacefully, gap is not a silver spacing bullet, you can use it when and where you like, or not at all if you find margins are sufficient. there's cases too where gap can't do what margin can, like different gaps between different rows: you get 1 gap between all rows for example. but margin can put any types of spacing between each row.

my appreciation of gap: mostly about the shifting of spacing ownership and it's more flexible i18n spacing.
margins are owned by individuals/children, and gap is owned by a parent. this makes adjustments available in a single place (parent), as opposed to scattered amongst individuals as we've done historically. most the time i need consistent spacing, and gap is great at that. gap also is easier to juggle with international (RTL) layouts, where it's always between elements, regardless of wrapping or direction. this is quite difficult with margins, which is why so many 12 column grid layout libraries have negative margins on the parent to offset the generic all side margins the children have so they can wrap and be spaced.

[bennadel]

I can 100% see using gap in places where I wholly own the content; and, where it's mostly about layout (ie, not about text content per se, but more about spacing out elements like buttons, nav items, form fields, etc). I suppose I just got excited that this would be a one-size fits all kind of scenario (wishful thinking, I know).

The fact that margin will also impact the gap makes things tricky (in that the space between items will be margin + gap). It almost feels like I should be using margin:0 as the default for everything (which I've always been very hesitant to do). And then, have some sort of "prose" container that applies the kind of margins that would be expressed in the default document state, like:

<section class="prose">
   <h2>...</h2>
   <p> ... </p>
   <p> ... </p>
</section>

... where I'd have styles like .prose h2, .prose p that add back in the block margins.

Anyway, I'm just thinking out loud. I thought maybe I was just missing something non-obvious; but, it sounds like we're all still just trying to do our best when it comes to managing margins.

I feel like I remember you and Una talking about some new / proposed CSS property that specifically deals with margin collapsing at the edges of containers ... perhaps once that lands in browsers, it will solve all our problems :D

[argyleink]

i believe you're remembering margin-trim!

on my site, in a blog post, where I write in markdown and dont have the ability to class mark my markup, you'll find i combine gap and margins.

spacing. so important, oddly tough to juggle all the interactions.

i think the answer here is TLC, it's LOVE Ben lol. With enough TLC, only using margins or always using gap.. one can find harmony. 🙂

[bennadel]

Ha ha, ok, TLC it is then :D