The CSS max-width property defines the maximum width that an element can have.
The element possesses a height of 50 pixels and spans the entire width of its container.
|
This element has a height of 50 pixels and a width of 100%. |
The height and width properties are utilized to establish the height and width of an element.
These properties exclusively affect the dimensions of the content area within an element, excluding padding, borders, or margins. They specify the height/width of the area encompassed by the padding, border, and margin of the element.
The height and width properties can be assigned the following values:
|
The height of this element is 200 pixels, while its width occupies 50% of the available space.
|
Example
Define the height and width for a <div> element.
| div { height: 200px; width: 50%; background-color: powderblue; } |
|
The height of this element is set to 100 pixels, while its width is defined as 500 pixels. |
Example
Specify the height and width for another <div> element.
| div { height: 100px; width: 500px; background-color: powderblue; } |
| Note: Keep in mind that the height and width properties exclusively define the dimensions of the content area within an element, excluding any padding, borders, or margins. These properties specify the height/width of the area confined by the padding, border, and margin of the element. |
The max-width property establishes the maximum width of an element.
You can specify the max-width using length values such as pixels (px), centimeters (cm), etc., or as a percentage (%) of the containing block. Alternatively, it can be set to none, which is the default and indicates that there is no maximum width limit.
When the browser window becomes smaller than the width of the element (500px), a horizontal scrollbar is added to the page, causing issues with the <div> mentioned above.
Utilizing max-width in such scenarios enhances the browser’s handling of smaller windows.
Hint: Resize the browser window to a width smaller than 500px to observe the contrast between the two divs!
|
The height of this element is 100 pixels, and its maximum width is capped at 500 pixels. |
Note: When both the width property and the max-width property are applied to the same element, if the value of the width property exceeds that of the max-width property, the max-width property takes precedence, and the width property is disregarded.
Example
The height of this <div> element is set to 100 pixels, with a maximum width limited to 500 pixels.
|
div { |
|
Property |
Description |
|
height |
Specifies the height of an element. |
|
max-height |
Specifies the maximum height of an element. |
|
max-width |
Specifies the maximum width of an element |
|
min-height |
Specifies the minimum height of an element |
|
min-width |
Specifies the minimum width of an element |
|
width |
Specifies the width of an element |
