centralize with margin: auto
why i can't put something in the middle of a parent with margin: auto, but i can put it in them width middle with margin: 0 auto ?
2 Replies
Hello @iurychiga . Here is my thoughts about this.
I think margin left and right with auto value only works on the element itself and not for its parent. Also, It only works when that element has the width property established.
Hey @iurychiga, Could you clarify what you mean by "...but i can put it in them width middle with margin: 0 auto "?
To add on to @stillmorris 's reply, indeed, your
.child doesn't have a specified width. Without a set width, the element will naturally take up the full width of its parent (assuming it’s a block-level element), and there won’t be any room for margins. The browser automatically calculates and sets equal margins on the left and right sides, centering the element horizontally within its parent: your .parent's parent is the <body>, which inherits <html>'s width, set by the viewport size.
Note that margin: auto is margin: auto auto which translates into margin: 0 auto; because auto equals 0 when computed for top and bottom margins (by default). The browser doesn’t calculate equal top and bottom margins to center the element vertically because block-level elements (like your divs) are laid out vertically by default, one after the other. You could set display: flex or display: grid in your .parent and your margin: auto in the .child should work (again, so long as it has a width set, can be a percentage; and your parent has a height). Try it out! I believe this is known as setting a new block formatting context, in case you're wondering.
Be careful with collapsing margins as well. For instance, when a margin is applied to a child element, it can affect the position of the parent element. If the parent element has no padding or border, and the child element has a top margin, then the child element’s margin collapses with the parent element’s margin, causing the parent element to move along with the child element.
In case you haven't watched them yet, I encourage you to go through Kevin's playlist:
https://www.youtube.com/watch?v=qKiz9gdJdr8
https://www.youtube.com/watch?v=EhbZGV2dqZ4&list=PL4-IK0AVhVjN1x-G7WHXs4y_Jo-MUocgfKevin Powell
YouTube
Collapsing margins - what they are and how to deal with them
Collapsing margins are incredibly frustrating when you don't understand them, but once you know how they work, and in what situations, you can find solutions to work around them.
Codepen from this video: https://codepen.io/kevinpowell/pen/NWdOyrP
CSS Working Group Mistakes made in CSS: https://wiki.csswg.org/ideas/mistakes
More information on ...
Kevin Powell
YouTube
Margin and Padding Deep Dive: The basics
Margins and padding cause a lot of confusion amongst new developers. This video is the start of a deep dive miniseries taking a look at them.
This video is really a look at the very basics of margins and padding, what each one do, and what the differences are between the two of them.
I also take a look at how auto margins work, and why & how w...