CSS Dimension

In this tutorial you will learn how to set width and height of an element using CSS.

Setting Element Dimensions

CSS has several dimension properties, such as width, height, max-width, min-width, max-height, and min-height that allows you to control the width and height of an element. The following sections describe how to use these properties to create a better web page layout.

Setting the Width and Height

The width and height property defines the width and height of the content area of an element.

This width and height does not include paddings, borders, or margins. See the CSS box model to know how the effective width and height of an element's box is calculated.

Let's try out the following example and see how it actually works:

div {
    width: 300px;
    height: 200px;
}

The above style rules assigns a fixed width of 300 pixels and height of 200px to the <div> element.

The width and height properties can take the following values:

• length - specifies a width in px, em, rem, pt, cm, etc.
• % - specifies a width in percentage (%) of the width of the containing element.
• auto - the browser calculates a suitable width for the element.
• initial - Sets the width and height to its default value, which is auto.
• inherit - specifies that the width should be inherited from the parent element.

You can not specify negative values to the width and height properties.

Setting Maximum Width and Height

You can use the max-width and max-height property to specify the maximum width and height of the content area. This maximum width and height does not include paddings, borders, or margins.

An element cannot be wider than the max-width value, even if the width property value is set to something larger. For instance, if the width is set to 300px and the max-width is set to 200px, the actual width of the element will be 200px. Let's check out an example:

div {
    width: 300px;
    max-width: 200px;
}

Likewise, an element that has max-height applied will never be taller than the value specified, even if the height property is set to something larger. For example, if the height is set to 200px and the max-height set to 100px, the actual height of the element will be 100px.

div {
    height: 200px;
    max-height: 100px;
}

Setting Minimum Width and Height

You can use the min-width and min-height property specify the minimum width and height of the content area. This minimum width and height does not include paddings, borders, or margins.

An element cannot be narrower than the min-width value, even if the width property value is set to something lesser. For example, if the width is set to 300px and the min-width is set to 400px, the actual width of the element will be 400px. Let's see how it actually works:

div {
    width: 200px;
    min-width: 300px;
}

Similarly, an element to which min-height is applied will never be smaller than the value specified, even if the height property is set to something lesser. For example, if the height is set to 200px, and the min-height is set to 300px, the actual height of the element will be 300px.

div {
    height: 100px;
    min-height: 200px;
}

Setting a Width and Height Range

The min-width and min-height properties are often used in combination with the max-width and max-height properties to produce a width and height range for an element.

This can be very useful for creating flexible design. In the following example the minimum width of the <div> element would be 300px and it can stretches horizontally up to a maximum 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 would be 300px and it can stretches vertically up to a maximum 500px.

div {
    min-height: 300px;
    max-height: 500px;
}