CSS provides various dimension properties, including width, height, max-width, min-width, max-height, and min-height. These properties enable you to manage the width and height of an element. The following sections explain how to utilize these properties to enhance the layout of your webpage.
The width and height properties determine the width and height of an element's content area.
These dimensions exclude paddings, borders, or margins. Refer to the CSS box model to understand how an element's box size is calculated.
Let's examine the example below to grasp how it operates:
div {
width: 300px;
height: 200px;
}The above style rules allocate a fixed width of 300 pixels and a height of 200 pixels to the <div> element.
The width and height properties support various values:
auto.Negative values are not allowed for the width and height properties.
Tip: Usually, block elements like <div>, <p>, etc., automatically expand to 100% width and adjust height to fit content. It's advisable to avoid fixed width and height settings unless necessary.
To impose constraints on the width and height of an element, you can employ the max-width and max-height properties. These limitations apply solely to the content area, excluding paddings, borders, or margins.
An element cannot surpass the specified max-width, even if its width property is set higher. For example, if the width is set to 300px and max-width to 200px, the element's actual width will be 200px. Let's explore an example:
div {
width: 300px;
max-width: 200px;
}Note: If the min-width property exceeds the max-width value, the min-width takes precedence.
Similarly, an element subjected to max-height will never exceed the specified height, even if its height property is set higher. For example, if the height is set to 200px and max-height to 100px, the element's actual height will be 100px.
div {
height: 200px;
max-height: 100px;
}Note: If the min-height property exceeds the max-height value, the min-height takes precedence.
You can utilize the min-width and min-height properties to set the minimum width and height of an element's content area. These minimum dimensions exclude paddings, borders, or margins.
An element cannot become narrower than the specified min-width, even if the width property value is smaller. For instance, if the width is set to 300px and min-width to 400px, the element's actual width will be 400px. Let's see this in action:
div {
width: 200px;
min-width: 300px;
}Note: The min-width property is commonly used to ensure that an element has at least a minimum width even if no content is present. If the content within the element surpasses the minimum width set, the element will naturally expand to accommodate it.
Similarly, an element with min-height applied will never be smaller than the specified value, even if the height property is set to something smaller. For instance, if the height is set to 200px and min-height to 300px, the element's actual height will be 300px.
div {
height: 100px;
min-height: 200px;
}Note: The min-height property is commonly used to ensure that an element has at least a minimum height even if no content is present. However, the element will be allowed to grow normally if the content exceeds the minimum height set.
The min-width and min-height properties are often paired with max-width and max-height to establish a range of widths and heights for an element.
This technique is beneficial for creating flexible designs. In the below example, the minimum width of the <div> element is set to 300px, and it can expand horizontally up to a maximum of 500px.
div {
min-width: 300px;
max-width: 500px;
}Similarly, you can define a height range for an element. In the example below, the minimum height of the <div> element is set to 300px, and it can stretch vertically up to a maximum of 500px.
div {
min-height: 300px;
max-height: 500px;
}