Loading lesson path
Overview
Formula
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.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.
Formula
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.
Formula
So, using max - width will improve the browser's handling on small windows.Drag the browser window to smaller than 600px wide, to see the difference between the two divs below!
This element has a width of 600 pixels.
Formula
This element has a max - width of 600 pixels.Formula
One < div > element with a max - width of 500 pixels, and one < div > element with a width of 500 pixels:.div1 {max-width: 500px;
background-color: powderblue;
}.div2 {
width: 500px;
background-color: powderblue;
}If you use both the width property and the max-width property on the same element, and the value of the width property is larger than the max-width property; the max-width property value will be used!A <div> element with both a width and a max-width property:.div1 {
width: 100%;
max-width: 900px;
background-color: powderblue;
}Formula
Try it Yourself - ExamplesThis example demonstrates how to set a minimum width and a maximum width of an element using a pixel value.
This example demonstrates how to set a minimum height and a maximum height of an element using a pixel value.
Formula
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 - widthSets the minimum width of an element width