Vertical margins/paddings of sections are inconsistent between pages

[ariasuni]

Page(s) Affected

All the pages.

What needs to be fixed?

• Sometimes margins are used, sometimes paddings
• Sometimes margin/padding are added to the top, to the bottom, or both
• Sometimes px are used, other times rem

This results in inconsistent margins. Sometimes the rhythm of the section is weird, sometimes there’s a lot of wasted space, sometimes margins are plain wrong on mobile or tablet form factors.

Example:

On the home page:

• The header “Why Rust?” has no padding/margin-bottom, and each value is a section with 24px of margin, so 24px in total
• The text has 30px of margin-bottom and there are 60px for the section, for a total of 90px.

But on Learn:

• The header “Get started with Rust” has 30px of padding-bottom and one the divs containing the text of the first section has 12px of padding-top, for a total of 46px
• The text of sections have 96px of margin-bottom, and 60px for the section, for a total of 196px (!)

Suggested Improvement

• Always use padding except if we need margin collapsing
• Always use padding-bottom for elements inside sections, so that we always know easily the distance between elements
• Always use rem when possible (preferably classes from Tachyons)

Here’s a proposition:

• Sections use 3rem on top and 5rem on bottom
• First header of sections and different elements uses 3rem on bottom
• List of items (e.g. buttons) or elements of the same sub-section (e.g. a button who follows a paragraph) are spaced by 2rem
• With paragraphs, 1rem between p and 2rem on the last p to separate it from the next hX

The sizes have been chosen so that the final result looks like the “Build it in Rust” section on the home page. It’s one of the most compact section of the website while still not being busy in my opinion. This should help a lot with the complaints of wasted space (see #412 and #786).

Screenshots

Before:

After:

Before:

After:

Before:

After: