Menu
Is
max-width:auto;
equal to
max-width: 100%?
And if not, what's the difference?
510
Using width, max-width and margin: auto;The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.
So max-width means the maximum width it can be is 100%. So if an image is 500px wide, and the screen is 1000px then the image will be 500px wide. But if the screen is 400px, then the image will be 400px as well, as the maximum width it can be is 100%
The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default.
In many cases, applying width: 100% to a block level element is either unnecessary or will bring undesirable results. If you're using padding on the inner element and you use box-sizing: border-box , then you'll be safe.
They are not equal. auto is not a valid value for max-width.
If you're looking for a value that means "there is no upper bound for the width of this element", that value is none (see the spec on max-width).
none is not equal to 100% either, however. The value 100% means that an element can only be as wide as the constraints of its containing block at most (see the spec on the width property for details on percentage widths).
With none, you could still cause the element to be wider than its containing block (which would typically result in overflow), e.g. by setting width: 150% on the element. With a max width of 100%, that limit would simply take precedence over the 150% setting.
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
