Chunking element together will help create rhythm and flow in your posts. One of the typical issues with website page layouts is how headings float horizontally between paragraphs. Unlike books, magazines and other print media, headings are anchored to there rightful paragraph. The anchoring of the heading to the paragraph creates the needed tension between the elements and lets the user know they are pertaining to each other.
This seems to be almost universally overlook by most CSS templates and is rarely address with custom styles.
Not helping the issue is the CSS collapsible margins box model which can be a pain. This occurs when two block-level elements with margin meet vertically. Only the larger of the two margins are applied, adding more confusion to the floating heading issue.
Also if we do not have custom CSS for the headings and paragraphs the browsers user agent stylesheet will add margin-block-start: 1em; margin-block-end: 1em; of space to all the headings and paragraphs depending on the browser type.
By using the element + element selector CSS syntax we can easily control the paragraphs margin-top that come immediately after headings, without effecting all the paragraph tags on the site.
Unfortunately the first occurrence of selectors does not exist. We can only select an element that follows another element. So we have to set all of our headings to margin-bottom: 0; and then we can select the following paragraph tag margin-top to get our preferred spacing.
This also will remove the unused collapsed margin that is occurring between the headings and the paragraphs making the site more efficient and easier to manage.
Example:
This is the Page First h2 or h3 Heading
Here I targeted the h2 + p. The margin between the heading and the paragraph is set to 12px. Notice the paragraph tag is only effecting the CSS for the margin between the heading and paragraph elements, that is in sequence where there is a heading above the paragraph.
When two paragraph elements or any other HTML elements meet they will not be selected.
This is the Page h2 Above a ul tag
- Here I targeted the
h2 + ul. - This visually anchors the heading to the ul.
h1,h2,h3,h4 {
font-weight: normal;
margin-bottom: 0;
}
h2 + p, h3 + p, h4 + p, h2 + ul, h2 + ol {
margin-top: 12px;
}Use :has() to Select Immediately Before
Using the :has() pseudo-class we can select the heading before the paragraph.
Example
This is the heading
Here is the sub heading
<h2 class="article-title">This is the Heading</h2>
<p class="article-subtitle">Here is the sub heading</p>.article-title:has(+ .article-subtitle) {
color: blueviolet;
}Now we can also say not: like a if statement. If the heading is not followed by a sub heading make the heading green.
Example
This is the heading
This is a paragraph and not a sub heading.
<h2 class="article-title">This is the Heading</h2>
<p>This is a paragraph and not a sub heading.</p>.article-title:not(:has(+ .article-subtitle)) {
color: green;
}