CSS3 Height and Width

Using the CSS3 height and width property, we can define the size of the HTML element. On the other hand, CSS3 max-width property specifies the maximum width of an element.

Setting CSS3 Height and Width

From the development standpoint, height and width define the height and width of an HTML element. Generally, margin, padding, and borders are not included in the height and width.

CSS3 height and width properties define the width/height of an area inside the padding, border, and margin of an element.

CSS3 Height and Width Values

We can assign the following values to the height and width properties:

auto – if we do not specify height and width values, the default value is auto.
length – specifies the height/width of an element in px or cm.
percentage (%) – Defines the width/height of an element in the percentage of the containing block.
initial – assigns the default value to the height and width CSS properties.
inherit – it tells the browser height and width derived from its parent value.

CSS3 Height and Width Properties with Example

Defines the height and width of the div element

Example

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS3 Height and Width
    </title>
    <style>
        div {
            height: 400px;
            width: 60%;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <h2>define the height and width of the div element</h2>
    <div>
        The height of the div element is 400px and width is 70%
    </div>
</body>
</html>

The output of this code will be

CSS3 Height and Width

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            height: 400px;
            width: 250px;
            background-color: lawngreen;
        }
    </style>
</head>
<body>
    <h2>Set the widht and height of HTML5 element in px</h2>
    <div>
        the height of an element is 400px and widht is 250px
    </div>
</body>
</html>

The output of this code will be

CSS3 Height and Width

Setting max-width

CSS3 max-width property defines the maximum width of an element. The max-width accepts the value in px, cm, or percentage (%) of the parent element.

Moreover, you can set the max-width to none, showing there will be no maximum width.

The problem with the above-mentioned <div> element arises when the browser window does not have sufficient space for an element. In this situation, the browser automatically adds a scrollbar to the page.

To cope with this problem, use the CSS max-width property instead so the browser can handle this problem.

If, for some reason, you define both width and max-width property for the div element, the browser will only pick the max-width property.

Example

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS3 Height and Width
    </title>
    <style>
        div {
            height: 200px;
            max-width: 600px;
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <h2>Define the max-width for an element</h2>
    <div> The div element has a height of 200px and max-width of 600px</div>
    <p>Resize the browser window too visualize effect</p>
</body>
</html>

The output of this code will be

CSS3 Height and Width

Continue learning more.

External Resouces

https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size

Next Lesson » « Previous Lesson