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 thaninline
. 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.
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.
Top comments (0)