CSS max-width and min-width Tutorial with Examples
1. CSS max-width
No ADS
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.
Take an example of CSS max-width:
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
2. CSS min-width
No ADS
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:
Possible values of CSS min-width:
«length»
Specify a specific value of the minimum width, for example, 150px, 30cm, etc.
«percentage»
The percentage value is compared to the width of the parent element.
none
Then the browser will automatically calculate and select a value for the min-width.
max-content, min-content, fit-content, stretch
No ADS
CSS Tutorials
- Units in CSS
- Basic CSS Selectors Tutorial with Examples
- CSS Attribute Selector Tutorial with Examples
- CSS combinator Selectors Tutorial with Examples
- CSS Backgrounds Tutorial with Examples
- CSS Opacity Tutorial with Examples
- CSS Padding Tutorial with Examples
- CSS Margins Tutorial with Examples
- CSS Borders Tutorial with Examples
- CSS Outline Tutorial with Examples
- CSS box-sizing Tutorial with Examples
- CSS max-width and min-width Tutorial with Examples
- The keywords min-content, max-content, fit-content, stretch in CSS
- CSS Links Tutorial with Examples
- CSS Fonts Tutorial with Examples
- Understanding Generic Font Family Names in CSS
- CSS @font-face Tutorial with Examples
- CSS Align Tutorial with Examples
- CSS Cursors Tutorial with Examples
- CSS Overflow Tutorial with Examples
- CSS Lists Tutorial with Examples
- CSS Tables Tutorial with Examples
- CSS visibility Tutorial with Examples
- CSS Display Tutorial with Examples
- CSS Grid Layout Tutorial with Examples
- CSS Float and Clear Tutorial with Examples
- CSS Position Tutorial with Examples
- CSS line-height Tutorial with Examples
- CSS text-align Tutorial with Examples
- CSS text-decoration Tutorial with Examples
Show More