CSS Does auto margin have a predefined minimum value (that prevents it to shrink to zero)?
Hi,
New here, read rules, hope I am posting the question the right way 🙂
I have set the max-width for a div at 400px, and margin: auto; and the div is centered.
Then I started to shrink the viewport width. I was expecting that margins will gradually go to zero, and then when there is no space for margins (at 400px viewport width) that div will start to shrink proportionally.
But I've noticed that div shrinks before the viewport width reaches 400px because auto margins don't go to zero but keep some minimum value (200px or so).
Is this a normal behaviour for auto margin, and could it be set differently?
Thanks!
14 Replies
Did you set
box-sizing: border-box?
You could also check if there's some padding on the body itself, or some other parent element.Hi Joao,
Thanks for your answer. Yes, here is the code:
---
<body>
<div class="box"></div>
</body>
---
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 400px;
height: 400px;
background-color: blue;
margin: auto;
}Mmm, yeah but that fixes the width of the box to be 400px regardless. You can try to set it to something like this instead:
Something like this seems to work: https://codepen.io/D10f/pen/YzBzMbQ
Note that you must preserve the aspect-ratio and then you don't have to specify the height either, unless you need it to be of a certain dimensions.
Thanks Joao, this works in Firefox but not in Chrome. It might be a browser preference on how to compute auto margin?
It works fine for me on Brave, which is a Chromium-based browser, so it's probably something specific to Chrome... seriously, Chrome is starting to become the new IE, nothing works with it anymore
the codepen Joao linked works just fine in chrome for me, unless I'm missing something
You can try to disable any extensions for Chrome, maybe something is interfering with it. Do other Chromium-based browsers work fine for you or is it just Chrome?
or is the problem just happening once you integrate it into your own design?
I noticed the problem in my own design, and then isolated the problem to this example. Joao's snippet works well everywhere (Codepen, Firefox, Brave) but not in Chrome for some reason. I have disabled all extensions and rerun the browser, with no success.
Anyway, since I am learning the basic concepts, the main goal for me is to know that such behavior in Chrome is a bug and not a standard. That's perfectly fine for now.
Many thanks for your answers, I've got some very valuable information and thoughts!
You can also do width: min(100%, 400px) shorthand for that
Oh, I didnt know that one. I like being a bit more explicit though, it helps when overwriting properties in media queries too
Ya that's totally valid! I like using
min for that because you don't need a media query for itThanks!
Mm really then I think I should also try it from now on...