Spacing can be divided into two groups:
- inner spacing (
- outer spacing (
What's a margin collapse? permalink
Margin collapse happens when two vertical elements have a margin, and one of them has a greater margin than the other. In that case, the greater margin will be used, and the other will be ignored.
🔨 To fix: Use a single direction margin, e.g.:
🤔 If both the parent and the child have a margin, the child's margin will be collapsed.
- Add a
borderto the parent element OR
- Change the child element
padding-topto the parent element.
Padding is not working permalink
Vertical padding doesn’t work with elements that have display: inline, like
🔨 To fix: need to do
RTL Styling permalink
Learn about Right to Left styling.
Gaps in Flexbox layout permalink
Flexbox doesn't have a gap property, like
🔨 to fix:
padding-leftto the grid item AND
- Add a negative
margin-leftwith the same padding-left value to the grid parent.
The reason: because the first card has padding-left while in reality it’s not needed. So it will push the wrapper to the left and cancel that unneeded space (Demo).
Margin bottom permalink
The last element should not have a bottom margin, as margin should only be between elements.
🔨 To fix: cancel the unneeded spacing by adding a negative margin to the parent element.
Viewport Minimum (vmin) – A percentage of the viewport width or height, whichever is smaller. 10vmin will resolve to 10% of the current viewport width in portrait orientations, and 10% of the viewport height on landscape orientations.
Viewport Maximum (vmax) – A percentage of the viewport width or height, whichever is larger. 10vmax will resolve to 10% of the current viewport height in portrait orientations, and 10% of the viewport width on landscape orientations
grid-gap: min(2vmax, 32px);
Use a gap equal to 2vmax, but it shouldn’t go above 32px.