Spacing

Padding and margin

Padding is the inner whitespace of a block level element. In most instances, it is equal for all sides of the container.

To add spacing between objects, use margin-bottom. Only add margin to the top as an exception. If excess spacing on the bottom is unnecessary or undesirable, use the pseudo selector :last-child to reset the margin on the last item in a group.

Use 0.8rem for padding and margin inside and between objects.

Use 2rem for margin-bottom between content sections.

Section breaks

Group like content into <section> elements. Each <section> should begin with a <h2> and have an id assigned to it.

For a <section> with significant text, consider using a horizontal break, <hr />, or other elements like lists to add a visual break.