CSS - Dimension

Quiz

CSS dimension define the size and space occupied by elements on a webpage. The dimension properties like height, width, max-height, max-width, line-height and many more are used to define width, height of HTML elements in every screen sizes. In this tutorial we will learn how to manage dimension and layout of HTML elements in varying screen sizes.

CSS Setting height and width

The height and width properties allow you to set specific height and width for your positioned element.

These properties can hold following values:

length: Any unit of length (px, pt, em, in, etc.)
percentage (%): A percentage value, which is in percent height/width of the containing block.
auto: Browser calculates the height and width of the element. (For example setting height automatically to match aspect ratio of image for the specified width)
initial: Sets the value of height and width to its default value.
inherit: Inherits the value of height and width from its parent value.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            height: 100px;
            width: 80%;
            background-color: rgb(206, 211, 225);
        }
        img{
            height: auto;
            width: 180px;
        }
    </style>
</head>

<body>
    <h1>Height and Width Property</h1>
    <h2>Length and percentage values</h2>
    <div>
        This div element has a height of 50px and a width 
        of 80%.
    </div>

    <h2>Auto value</h2>
    <img src="/https/www.tutorialspoint.com/css/images/logo.png"/>
    <br>
    Height is this image adjusted for width 180px so that 
    aspect ratio is maintained.
</body>
</html>

The padding, margin and border are not included in height and width.

Set Max-Height and Max-Width

The max-height and max-width properties are used to set the maximum height and width of an element.

max-width: Sets the maximum width an element can be. Prevents an element from exceeding this width, even if the content inside it requires more space.
max-height: Sets the maximum height an element can be. Prevents an element from exceeding this height, even if the content inside it requires more space.

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .container {
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }
        
        img{
            max-width: 100%;
            max-height: 400px;
            height: auto;
        }

    </style>
</head>
<body>
    <div class="container">
        <img src="/https/www.tutorialspoint.com/css/images/logo.png" >
        <p>
            This image has a maximum width and height set. 
            Resize the browser window to see how the image 
            scales down.
        </p>
    </div>
</body>
</html>

Set Min-Height and Min-Width

The min-height and min-width properties are used to set the minimum height and width of an element.

min-width: Sets the minimum width an element can be. Ensures that the element doesnt shrink below this width, even if the content is smaller.
min-height: Sets the minimum height an element can be. Ensures that the element doesnt shrink below this height, even if the content is smaller.

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .container {
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }
        
        .box {
            min-width: 300px;
            min-height: 200px;
            background-color: #f0f0f0;
            padding: 20px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            This box has a minimum width and height set. 
            Resize the browser window to see how the box 
            does not shrink below the specified dimensions.
        </div>
    </div>
</body>
</html>

CSS Dimension Related Properties

All the properties related to dimensions are listed in the table below:

Property	Description	Example
height	Sets the height of an element.	Try It
width	Sets the width of an element	Try It
max-height	Sets the maximum height of an element	Try It
min-height	Sets the minimum height of an element.	Try It
max-width	Sets maximum width of an element.	Try It
min-width	Sets minimum width an element.	Try It

Print Page