Add margin top to certain single elements surrounded by code blocks for consistency

[ichard26]

What does this PR change? What problem does it solve?

Take this structure:

<div .highlight>
<p>

<div .highlight>

The current post-single CSS adds margin to the bottom of the paragraph and that's it. This works great when the previous element also got the same amount of bottom margin, however code blocks do not! The end result looks similar to the figure above.

This commit fixes this adding top margin to elements that come immediately after a code block (they have the .highlight class). The amount of top margin added is the same they already get on the bottom.

Before (notice that elements between the codeblocks appear closer to the previous code block than the next¹)

After

I left definition lists alone because they lack any margin at all so adding some margin top would be inconsistent.

Was the change discussed in an issue or in the Discussions before?

Nope. My apologies if this is bad form on my part!

PR Checklist

• This change adds/updates translations and I have used the template present here. n/a
• I have enabled maintainer edits for this PR.
• I have verified that the code works as described/as intended.
• This change adds a Social Icon which has a permissive license to use it. n/a
• This change does not include any CDN resources/links. n/a
• This change does not include any unrelated scripts such as bash and python scripts. n/a
• This change updates the overridden internal templates from HUGO's repository. n/a

Footnotes

1. Except for ordered lists, my user agent spreadsheets apparently already "fixes" this problem adding enough margin top. ↩

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication