CSS max-width and min-width Tutorial with Examples

CSS max-width
CSS min-width

1. CSS max-width

CSS max-width is used for setting the maximum width of an element. It prevents the width of the element from exceeding a specified value.

Note: CSS width, min-width and max-width only work for Block and Inline-Block elements.
HTML Block/Inline Element

Take an example of CSS max-width:

https://ex1.o7planning.com/css/max-width/max-width-example.html

Syntax

/* «length» value */
max-width: 3.5em;

/* «percentage» value */
max-width: 75%;

/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/* Global values */
max-width: inherit;
max-width: initial;
max-width: unset;

Possible values of CSS max-width:

«length»

Specify a specific value of the maximum width, for example, 150px, 30cm, etc.

«percentage»

The percentage value is compared to the width of the parent element.

none

The width of the element is not restricted.

max-content, min-content, fit-content, stretch

The keywords min-content, max-content, fit-content, stretch in CSS

2. CSS min-width

CSS min-width is used for setting the minimum width of an element. It prevents the width of the element from being smaller than a specified value.

Note: CSS width, min-width and max-width only work for the Block and Inline-Block elements.

Syntax

/* «length» value */
min-width: 3.5em;

/* «percentage» value */
min-width: 75%;

/* Keyword values */
min-width: auto;
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;

/* Global values */
min-width: inherit;
min-width: initial;
min-width: unset;

Take one example of CSS min-width:

https://ex1.o7planning.com/css/min-width/min-width-example.html

Possible values of CSS min-width:

«length»

Specify a specific value of the minimum width, for example, 150px, 30cm, etc.