Room to Breathe

The text is ready, but everything is squeezed together: Preflight took away all the margins. Now give the recipe room to breathe:

  • The recipe is on a white card, with 32 px of padding on every side. The card is 24 px from the edges of the page.
  • What belongs together is close: the title is 8 px below the label, and each heading is 8 px above its list or paragraph.
  • The paragraph under the title is 16 px below it.
  • The parts of the recipe are further apart: each heading is 32 px below the part above it.
  • The two paragraphs have roomier lines, at least 1.6 times as high as the size of their text, so that they're easy to read.

A tip: remember the habit from the lesson on spacing and sizing: between elements below each other, make the space from one side only, for example always with a top margin. The checks measure the distances in the preview, so it doesn't matter which elements get the classes.

Instructions

Put the recipe on a white card with 32 px of padding, 24 px from the edges of the page.

Add the space between the parts of the recipe and between the lines of the paragraphs, as described above.

Start programming for free

By signing up, you agree to the Terms of Service and Privacy Policy.

Or sign up with:

2/3