WIP: Auto margins on headings that come after a last-of-type paragraph?

[digitalgravy]

body p:last-of-type + h1, body p:last-of-type + h2, body p:last-of-type + h3, body p:last-of-type + h4, body p:last-of-type + h5, body p:last-of-type + h6

What is the purpose of this styling? It currently only impacts headings that come after a single paragraph (but would fail to target anything in most typical circumstances because a heading rarely ever comes after a final paragraph).

Currently it gets in the way in situations where headings come after an accent heading (which uses a <p> for proper semantic html) in containers where other spacing techniques are used (such as gap/owl).

It seems to have no practical benefit and only causes issues…

[Michael]

I raised this a couple of weeks back - This was the reason given:

SOLVED: Phantom Psuedo margin

Hey Mick, Thanks for reaching out! If you set the tag of the basic text element in your phantom example to div or span, the problem solves itself (as it does in your “normal” example). The default styles p:last-of-type + h(x) provide spacing between paragraphs and headings that would otherwise stick together. Otherwise, you’d have to give every heading a margin-top, so this doesn’t happen, or remove the margin-top very frequently - and that would be quite inconvenient. Best regards, timmse

[timmse]

Hi Kevin,
Thanks for reaching out!

You are correct that the rule only applies in sporadic exceptional cases. After consulting with Thomas, we have decided to remove it. We’ll keep the p:last-of-type {margin-bottom: 0;}, because otherwise, you would have the same problems with the browser defaults of the p-tag.

Side note: From my point of view, it is questionable whether the p-tag is the correct element for an “accent heading”, “eyebrow heading”, or “sub-heading”, but the semantics are always debatable.

@Michael Yep, I remembered your post too and realized that my explanation doesn’t make quite as much sense

Best regards,
timmse

[Michael]

No worries at all mate put it down to having Covid fog. Great to see you raised it and have identified a solution going forward

[kshitij]

Just checking in whether this change will be made in a future release?

Came across it and didn’t realize why my heading was having a margin till I came across this post.

For now fixing it by wrapping it in a div or declaring it as a div in the first place.

[Hendrik]

Not sure if I should necro this, as I don’t know if it’s allowed.

To me and from what I can find from others (including template providers):

<p>Subheading</p>
<h2>Heading</h2>

Seems to be used nowadays.

So having a margin top added on every heading that has a p tag in front, does not seem logical as default behavior.

[thekendog]

It was said that this styling was going to be removed. However, it’s two years later now and I see this is still in the frontend-light stylesheet. Why wasn’t it removed? Also, shouldn’t the margin-bottom be applied to a “p” tag using :last-child. Wouldn’t that make more sense? I’m currently in a situation where the last element on my page is an unordered list, not a paragraph. As a result, all the spacing is jacked up.