css principles
🚀
master the principles, create better UIs
tags & categories
showing category
misc
2
posts
»
0
0
2
Margin Collapsing Mysteries
»
0
0
1
Floaty McFloatface: How floats work
summary
"Collapsing" means only allowing the largest margin to take vertical space and ignoring the "collapsed" ones.
It is activated when two top or bottom element boundaries touch and they share a common ancestor in the DOM.
Only applies to vertical/y-axis top-bottom margins.
To avoid it:
A. Prevent the element boundaries from touching with
padding
/
border
/text elements.
B. Parent set to
flex
or
grid
.
read post 002 »
summary
Floated elements wrap text around its sides (including inline and inline-block sibling elements).
The parent of the float element does not contain it by default (the float overflows at the bottom of the parent).
Apply
clear
:
both
to a sibling element that follows the floated element.
Or
overflow
:
auto
on the parent.
Floated elements take the same x-axis as the text line where they appear, or the one after if there is not enough space.
read post 001 »