You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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:
The text was updated successfully, but these errors were encountered:
Page(s) Affected
All the pages.
What needs to be fixed?
px
are used, other timesrem
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:
But on Learn:
Suggested Improvement
Here’s a proposition:
3rem
on top and5rem
on bottom3rem
on bottom2rem
1rem
betweenp
and2rem
on the lastp
to separate it from the nexthX
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:
The text was updated successfully, but these errors were encountered: