How does margin-top: auto; work?
Hey All,
I was looking for a solution to keep my footer either pinned to the bottom of the page or the content, whichever is greater, and found the following solution. It works, but I can't wrap my head around why is working the way it is?
When I don't have enough content the margin-top is some calculated value, and when the content is bigger than the page the margin-top is 0.
Here's the basic code:
11 Replies
afaik, for
margin-top and margin-bottom setting them to auto is equivalent to setting them to 0
what are you trying to accomplish with setting margin-top to auto?only time I ever use it xD
Yeah, I was reading mdm regarding margin, auto and margin-top: auto and it loosely said that it sets it to 0. But, when I use it as I have and the page doesn't have enough content (i.e usually the footer is not on the bottom), then it is correctly calculating the required value to push the footer to the bottom of the page. And if there is enough content then the value is 0 as expected.
So you have to get your body to be 100%/dvh and / or the wrapper first.
otherwise its going to not take up the space and the auto margin won't matter cause its got nothing to fill. That codepen should give you a good start. I personally prefer the grid method though.
Like I said, what I've done works, I just don't understand why margin-top: auto calculates the correct value when in the mdm docs it says it would be 0?
because its a flex child
Chris Coyier
CSS-Tricks
How Auto Margins Work in Flexbox | CSS-Tricks
Robin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted
I thought that article explained it better sry lol
Something to do with flex children becoming dense/shrinking and how setting margin to auto push to fill the remaining space. But goes back to a great principle and that is Parent > Child relationships. Like grid/flex children margins will also not collapse
I thought Kevin covered it in the flex course but can't find the reference atm.
Sidenote the reason I like Grid method more is you can toss it back to the intrinsic nature of grid and do something like this. If more content is added and still not enough to fill but you want it bottom.
https://codepen.io/b1mind/pen/VwVVBNB?editors=0100
Thanks for all your help. I understand now and more importantly after reading a different part of mdm found the reasoning: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container#alignment_and_flex-direction
Aligning items in a flex container - CSS: Cascading Style Sheets | MDN
One of the reasons that flexbox quickly caught the interest of web developers is that it brought proper alignment capabilities to the web for the first time. It enabled proper vertical alignment, so we can at last easily center a box. In this guide, we will take a thorough look at how the alignment and justification properties work in Flexbox.