Line spacing blocks of paragraphs in HTML with CSS

Suppose you have a note class in HTML. A note can have one or more paragraphs.

<p>This is not a note.</p>
<p class="note">This is the first line of a note.</p>
<p class="note">This is the second line of a note.</p>
<p>Back out of the note again.</p>

Here is a CSS snippet you can use if you want to add margins to separate the note from the surrounding text without affecting the line spacing of the note itself (and adds some sensible page breaking behaviour).

/* Fix spacing between multiple paragraphs in the same note */

p.note {
	margin-top: 40px;
	margin-bottom: 40px;
	page-break-before: auto;
	page-break-inside: avoid;
	page-break-after: avoid;
}

/* Override second and subsequent note lines */
p.note + p.note {
	margin-top: -40px; /* close gap */
	page-break-before: avoid;
}

This isn’t particularly complicated, but I thought it was worth recording it here for future reference.

It’s analogous to the Microsoft Word paragraph setting Don’t add space between paragraphs of the same style.