CSS Dimension

CSS has several dimension properties, such as width, height, max-width, min-width, max-height, and min-height that allows us 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

This 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.

Input:-

Index.html
	
<body>
	  <div>
	 </div>
</body>

Style.css
	
div {
    width: 300px;
    height: 200px;
}

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 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

We 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.  

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.

Same is illustrated in the below example:-

Input:-

Index.html
	
<body>
	  <div>
	 </div>
</body>

Style.css
	
div {
    width: 300px;
    max-width: 200px;
    height: 200px;
    max-height: 100px;
}

Output:-

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. Same will be case with min-height.


Setting Minimum Width and Height

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. 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.

Input:-

Index.html
	
<body>
	  <div>
	 </div>
</body>

Style.css
	
div {
    width: 200px;
    min-width: 300px;
    height: 100px;
    min-height: 200px;
}

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


Setting 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 is mostly used 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. Similarly, we 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

Input:-

Index.html
	
<body>
	  <div>
	 </div>
</body>

Style.css
	
div {
    min-width: 300px;
    max-width: 500px;
    min-height: 300px;
    max-height: 500px;
}

Output:-