The difference between CSS width, min-width, and max-width property

Cover photo by Markus Spiske on Unsplash.

CSS has three width related properties which are:

• width
• min-width
• max-width

These properties are old enough as the language itself. Their naming conventions should give you an idea on how they work but still some might think they are the same.

Reality is, they behave the same way in certain situations but they have their differences. That's what we'll talk about in this article.

First, we'll discuss the properties in detail with visual examples. Then we'll discuss their similarities and differences.

Let's dive in.

The width property

The width property is used to dictate how wide an element will be when rendered by the browser. The element in question should be an image, block level element, or an inline element having display property of block or inline-block.

The property accepts a combination of numbers and acceptable CSS units of measurement as its values.

/**
 * The em unit can be replaced with other units like
 * px, %, vmin, vmax e.t.c.
 */
.selector {
    width: 30em; /* Occupy 30em of the parent container */
}

The min-width property

This property, as the name implies dictates the minimum width of a block level element (or an image) when rendered by the browser. This means if a child element has a minimum width e.g. 0.1em the element will occupy the parent's entire width. It has a peculiar use case as we'll discuss later.

It has a good browser support, therefore, you can be confident when you use it.

Similar to the width property, it accepts a combination of numbers and acceptable CSS units of measurement as its values.

/**
 * The em unit can be replaced with other units like
 * px, %, vmin, vmax e.t.c.
 */
.selector {
    min-width: 30em; /* Occupy at least 30em of the parent container */
}

The max-width property

The max-width property dictates the maximum width of a block level element (or image) when rendered on screen by the browser.

This means if a child element has a maximum width less than the parent's container it will occupy that specified width but if it has a maximum width equal to the width of the parent's container, it will occupy the entire parent's width.

In most case, the max-width behaves like the width property, but not all the time as we'll see later.

/**
 * The em unit can be replaced with other units like
 * px, %, vmin, vmax e.t.c.
 */
.selector {
    max-width: 30em; /* Occupy at most 30em of the parent container */
}

In the image below, the child element has a max-width value of 30em. At this viewport it behaves the same as the width property when compared.

Now let's discuss their similarities and their differences.

Similarities and differences between width, min-width, and max-width

Similarities

All three properties are similar in the following ways:

• They dictate the width of an element.
• They take numbers and acceptable CSS units of measurement as their values.
• The work on block level elements or any elements having a display property other than inline. Image is an exception.

Differences

There are three main differences between these properties namely:

• Sizing
• Media queries for Responsive Web Design
• Responsive Images

These differences are best explained visually. Therefore, we'll show the behavior of each property in the browsers viewport and a table will be provided as a summary.

width sizing

The sizing is fixed. Therefore, a child element having a width of 30em, will be the same irrespective of the browser's viewport.

In the image below the viewport is large enough to accommodate the child and parent elements therefore there is no noticeable difference (as shown in at the beginning of this post).

The image below shows otherwise, here the browsers' viewport has been reduced and the child width is now equal to the parent's width.

When the viewport is further reduced, an overflow occurs in the browser's viewport as shown in the image below.

But when we reduce the width to 10em we get the following result:

min-width sizing

The value of the min-width property will allow the child element to occupy the entire width of its parent container if the value is large enough and the browser is at a larger viewport (as we've seen before).

When the viewport is reduced the child element is still occupying the entire parent's width.

Furthermore, when the viewport is reduced an overflow occurs in the browser as shown in the image below.

But when we reduce the child elements width to 10em which is lesser than the viewport's width, the child element becomes the same width with the parent's element.

max-width sizing

In most case, the child element having a max-width property behaves like the width property but when the browser's viewport is reduced you'll notice the difference in size as compared to the width.

To begin, we'll reduce the viewport and the result will be the same just as when we reduced the viewport for the width property.

When the viewport is further reduced the child element still occupies the entire parent's width compared to the width property that caused an overflow in the browser.

When the max-width is reduced to 10em at this viewport, it'll behave like the width property.

Media queries for Responsive Web Design

The philosophy behind Responsive Web Design is to make a design adapt to varying screen resolution from mobile to desktop as pioneered by Ethan Marcotte in 2010.

A website coded with Responsive Web Design includes a media query that is used to change the website layout on certain device resolution.

At the onset of the design, the designer designs for a mobile resolution, afterwards, they increase the resolution until the layout breaks, at this point a logical selection is made with the media query to test that the device indeed has a screen and the width of the screen at that point when the design breaks.

This width is the minimum width. Can you guess the property that we'll use? It is the min-width property. The minimum width at which the design breaks is supplied as a value to the min-width property. This value is further increased every time the design breaks and the designers need to change the layout of the design.

This approach is a recommended practice titled design for content and not device resolution.

@media screen and (min-width: 48em) { /* Take note of the min-width property */
    /**
     * The code blocks within this media query
     * will only work for devices with at least
     * 48em. Assuming a default font size of 16px,
     * that will be 48 * 16 = 768px. 768px is the minimum
     * width of an iPad device (as of August 2020).
     */
}

The max-width property is quite useful when a design is meant originally for larger resolutions and it needs to be scaled down for smaller ones.

@media screen and (max-width: 48em) { /* Take note of the max-width property */
    /**
     * The code blocks within this media query
     * will only work for devices with at most
     * 48em i.e. screen sizes of 768px and below.
     * Assuming a default font size of 16px.
     */
}

The width property is not a good candidate for targeting content change when doing Responsive Web Design.

Responsive Images

Responsive Images (or flexible images) are part of the core ingredients of Responsive design as outlined by Ethan Marcotte in his seminal article. These images do not exceed the boundaries of their parent container and they display quite well irrespective of device resolution.

Now, the question is: How do we make images responsive?

The answer is simple: max-width. This is where this property differs from its counterparts i.e. width and min-width.

In certain cases the width property will make your images "responsive" when you make the images occupy the entire width of its parent container.

.image-selector {
    width: 100%;
}

It's recommended to use the max-width property.

.image-selector {
    max-width: 100%; /* Never exceed your parent container. */
}

The min-width property is a no-go area for Responsive Images because there is high possibility the image will exceed its parent container and sometimes it can result in a distorted image.

These differences are summarized in the following table.

Conclusion

In this article we've discussed the width, min-width, and max-width properties including their similarities and differences but it's not exhaustive nor the end of it all. I'll encourage you to do further research.

If you have any questions, I'll be happy to answer them in the comments.