css principles
🚀
master the principles, create better UIs
tags & categories
showing tag
margin-collapse
1
posts
»
0
0
2
Margin Collapsing Mysteries
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 »