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:

Example

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.

Tip: Typically when you create a block element, such as <div>, <p>, etc. browser automatically set their width to 100% of the available width, and height to whatever is needed to show all the content. You should avoid setting a fixed width and height unless it is necessary.

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:

Example

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

Note: If the min-width property is specified with a value greater than that of max-width property, in this case the min-width value will in fact be the one that’s applied.

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.

Example

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

Note: If the min-height property is specified with a value greater than that of max-height property, in this case the min-height value will in fact be the one that’s applied.

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:

Example

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

Note: The min-width property is usually used to ensure that an element has at least a minimum width even if no content is present. However the element will be allowed to grow normally if its content exceeds the minimum width set.

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.

Example

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

Note: The min-height property is usually 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.

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.

Example

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.

Example

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