Topics

CSS Dimension

This tutorial helps you learn how to set an element's width and height using CSS.

 

Setting Element Dimensions

CSS has many dimension properties, like height, width, max-height, min-height, max-width, and min-width, that lets you control an element's width and height. How to use the CSS Dimensions properties to create a better web page layout has been described in the next section.

 

Setting the Width and Height

The property's width and height define an element's content area width and height. 

Paddings, borders, or margins are not included in this width and height. You can refer to the CSS box model to learn how an element's box's effective width and height are calculated.

Let's see how it works with the below example:

Example :

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

Try With Example

 

The style rules mentioned above are used for assigning a fixed width of 300 pixels and height of 200px to the <div> element. The height and width properties can take the following values:

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

Negative values cannot be specified to the width and height properties.

Tip: Generally, on creating a block element, like <div>, <p>, and so on browser automatically sets the width to 100% of the available width and height to whatever is required to show all the content. Setting a fixed width and height should be avoided unless it is necessary.

 

Setting Maximum Width and Height

The max-width and max-height properties can be used for specifying the content area's maximum width and height. This maximum height and width do not include borders, padding or margins.

The element cannot be wider than its max-width value, even in case the property value of width is set to something larger. So, for example, if you have set the width to 300px and the max-width to 200px, then, in that case, the element's actual width will be 200px. 

Example :

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

Try With Example

 

Note: In case you have specified the min-width property with a value greater than that of the max-width property, in this case, the min-width value will be the one that's applied.

Similarly, an element with max-height applied will never be taller than the specified value, even if the height property has been set to something larger. For example, if the max-height is set to 100px and the height is set to 100px, then the element's actual height will be 100px.

Example :

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

Try With Example

Note: If you have specified the min-height property with a value greater than that of the max-height property, then the min-height value will be the one that's applied.

 

Setting Minimum Width and Height

The min-width and min-height properties can be used to specify the content area's minimum width and height. This minimum width and height do not include borders, paddings, or margins.

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

Example :

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

Try With Example

 

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

Likewise, an element to which min-height is applied will never be smaller than the specified value, even in case the height property is set to something lesser. For instance, if you have set the min-height to 300px, and the height to 300px, then the element's actual height will be 300px.

Example:

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

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

 

Setting a Width and Height Range

The min-width and min-height properties are frequently used in combination with the max-width and max-height properties for producing an element's width and height range.

It is very useful to create a flexible design. In the example below, the minimum width of the <div> element would be 300px, and it can stretch horizontally up to a maximum of 500px.

Example:

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

Likewise, you can define an element's height range. In the example below, the minimum height of the <div> element would be 300px, and it can stretch vertically up to a maximum of 500px.

Example:

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