Flash cards
Review the key moves
What is the main idea behind CSS Min/Max Height and Width?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Put the learning moves in the order that makes the concept easiest to apply.
The min-width and max-width properties are used to set the minimum and maximum width of an element.
The min-height and max-height properties are used to set the minimum and maximum height of an element.
CSS Using max-width
The max-width property sets the maximum allowed width of an element. This prevents the width of an element to be larger than the max-width property value.
The max-width property can have the following values:
- length - Defines the maximum width in px, cm, etc.
- % - Defines the maximum width in percent of the containing block
- none - This is default. Means that there is no maximum width
One problem with the width property can occur when the browser window is smaller than the width of the element. The browser then adds a horizontal scrollbar to the page. So, using max-width will improve the browser's handling on small windows.
All CSS Dimension Properties
| Property | Description |
|---|---|
| height | Sets the height of an element |
| max-height | Sets the maximum height of an element |
| max-width | Sets the maximum width of an element |
| min-height | Sets the minimum height of an element |
| min-width | Sets the minimum width of an element |
| width | Sets the width of an element |