CSS Max-width

Max-width

This property is interesting because if you specify a max-width, the content's width will never exceed the value you have specified.

So if you set a <p> tag to a max-width of say 200px, the box-model will never exceed 200 pixels, although the content itself may overflow out, but the important point is that it will never exceed the width you have defined.

What is interesting is that if your content for the p tag takes up less than 200 pixels, then max-width will have no effect on it. The size will just be the amount of space that the content takes up.

This is useful with say grid layout to create responsive webpages. An image gallery that when you shrink, the image will also shrink, when you expand the viewport the image will grow but only up until the specified width.

Very good property, I approve.