TL;DR: Headings currently have a CSS margin-bottom
value, but not a margin-top
value resulting in a distance to the following paragraph. I propose to add a margin-top
and reduce the margin-bottom
of headings.
Example picture (current situation): On the left a screenshot of an answer with a heading (level 2), on the right backgrounds added for visualization.
Example picture (with proposed margins):
Same text but with the margin-top
set to 1em
and the margin-bottom
reduced to 0.3em
. Notice how the heading seems to be attached to the following paragraph instead of the previous one.
Long story: For context, I recently gave a longer answer with multiple headings and subheadings. I noticed that the margin on headings looks odd as they seem to be attached to the previous paragraphs instead of the following one.
After checking the CSS I found out, that the value of the margin-bottom
is set to 1em
, resulting in a distance of 21px
to the bottom for level 1 headings while they have a distance of 15px
to the previous paragraph. In my opinion, a margin-top
should be added and the margin-bottom
should be reduced to improve the readability.
More text examples of all heading levels. All headings have a distance of 15px
to the previous paragraph.
Paragraph with text.
Heading, level 1, 21px margin bottom
Paragraph with text.
Heading, level 2, 19px margin bottom
Paragraph with text.
Heading, level 3, 17px margin bottom
Paragraph with text.