The difference between CSS width, min-width, and max-width property
Tags: html, css, webdev
Published: 2020-08-13 22:15:57

---
title: The difference between CSS width, min-width, and max-width property
published: true
description: In this article we discuss the similarities and differences between the three properties
tags: html, css, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jvh0fn31mh5b3r7w1hez.jpg
---

> <b>Cover photo by [Markus Spiske](https://unsplash.com/@markusspiske) on [Unsplash](https://unsplash.com/).</b>

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.

<hr>

## __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. 

```css
/**
 * 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 */
}
```

![An image demonstrating the max width property](https://dev-to-uploads.s3.amazonaws.com/i/jcs9hc9j1b6fvabhizy5.png)

## __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.

```css
/**
 * 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 */
}
```

![A picture demonstrating the min width property](https://dev-to-uploads.s3.amazonaws.com/i/ia58dlcwmp1mgfw57gtn.png)

## __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.

```css
/**
 * 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.

![An image demonstrating the max width property](https://dev-to-uploads.s3.amazonaws.com/i/z1kuwsesobm8ne1wz029.png)

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).

![An image demonstrating the width property](https://dev-to-uploads.s3.amazonaws.com/i/ktmhtyaqrf8qnjtvih04.png)

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

![An image demonstrating the width property on a reduced viewport](https://dev-to-uploads.s3.amazonaws.com/i/cjmf82o7h20rte2183km.png)

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

![An image demonstrating the width property on a reduced viewport causing an overflow in the browser's window](https://dev-to-uploads.s3.amazonaws.com/i/9qjcrougg68pio49gj1b.png)

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

![An image demonstrating the width property on a reduced viewport](https://dev-to-uploads.s3.amazonaws.com/i/psm0fl6gdy957ggz353r.png)

#### __`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.

![An image demonstrating the min-width property on a reduced viewport](https://dev-to-uploads.s3.amazonaws.com/i/k6og3g7bg7efyeygzgyh.png)

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

![An image demonstrating the min-width property on a reduced viewport leading to an overflow](https://dev-to-uploads.s3.amazonaws.com/i/prbcuh2pnnou57t93e38.png)

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.

![An image demonstrating the min-width property on a smaller viewport](https://dev-to-uploads.s3.amazonaws.com/i/7lyguchxaatx8cy8b7u9.png)

#### __`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.

![An image demonstrating the min-width property on a reduced viewport](https://dev-to-uploads.s3.amazonaws.com/i/6r6ct6bvo8i6kggr73d5.png)

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.

![An image demonstrating the max-width property on a reduced viewport](https://dev-to-uploads.s3.amazonaws.com/i/3wilpgwhq4avt00kzcle.png)

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

![An image demonstrating the max-width property on a smaller viewport](https://dev-to-uploads.s3.amazonaws.com/i/f4ydub15226dbzzph9b4.png)

#### __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](https://alistapart.com/article/responsive-web-design/).

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_.

```css
@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.

```css
@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](https://alistapart.com/article/responsive-web-design/#section7). 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.

```css
.image-selector {
    width: 100%;
}
```

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

```css
.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.

![A distorted image](https://dev-to-uploads.s3.amazonaws.com/i/5na17gg34l3kk6a1p9u5.png)

These differences are summarized in the following table.


| Differences                             | `width`                                                      | `min-width`                                                  | `max-width`                                                  |
| --------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| Sizing                                  |Fixed. Therefore, a child element having a width of `45%`, `45em`, or other values of the `width` property will be the same irrespective of the browser's viewport. At a lower viewport the width of the child element will be equal to the parent's container width. As the viewport gets smaller it can cause an overflow in the browser viewport or parent container. | 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. At a lower viewport it will cause an overflow in the browser's viewport, but when the `min-width` value is smaller than the viewport then the width of the child element will be equal to the parent's width. | In most case, the child element having a  `max-width` property will behave like the `width` property but when the browser's viewport is reduced you'll see the difference in size compared to the `width` and at a certain viewport size the width of the child element will be equal to the parent's width. |
| Media queries for Responsive Web Design | Not Good                                                     | Very Good                                                    | Good                                                         |
| Responsive Images                       | Good                                                         | Not Good                                                     | Very Good (_highly recommended_)                             |

## __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.