CSS Dimension

CSS provides several dimension properties, including width, height, max-width, min-width, max-height, and min-height, that allow us to control the size 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 properties set the dimensions of the content area of an element. These properties do not include any padding, borders, or margins. To understand how the effective width and height of an element's box are calculated, it's important to familiarize yourself with the CSS box model.

Input:-

Output:-

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.

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

Note:- Typically when we create a block element, such as <div>, <p>, etc. browser automatically sets its 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

The same is illustrated in the below example:-

Input:-

Output:-

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

Setting Minimum Width and Height

The min-height properties specify the minimum width and height of an element's content area. These properties do not include paddings, borders, or margins.

If the width property value is set to a value less than the min-width, the element's width will be set to the min-width value. For example, if the width is set to 300px and the min-width is set to 400px, the element's width will be 400px.

Similarly, if the min-height property is applied, an element's height will be set to the min-height value if the height property is set to a value less than the min-height. For example, if the height is set to 200px and the min-height is set to 300px, the element's height will be set to 300px.

Input:-

Output:-

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. The same is the case with min-height

Setting Width and Height Range

The min-width and min-height properties are commonly used together with the max-width and max-height properties to establish a range of acceptable dimensions for an element.

This approach is often utilized in creating flexible designs. In the following example, the <div> element has a minimum width of 300px and can expand horizontally up to a maximum of 500px. Similarly, we can define a height range for an element. In the example below, the <div> element has a minimum height of 300px and can expand vertically up to a maximum of 500px.

Input:-

Output:-