Tutorial Article

CSS Width and Height

The CSS Width and Height properties are used to define the size of an HTML element. These properties help in designing layouts and controlling how elements appear on a webpage. 👉 This sets the element width to 200px and height to 100px. Attributes Property Description Example width Sets element width width: 300px; height Sets element […]

Apr 2, 2026CSSCSS Box ModelTutorials

The CSS Width and Height properties are used to define the size of an HTML element.

Width → controls the horizontal size
Height → controls the vertical size

These properties help in designing layouts and controlling how elements appear on a webpage.

Syntax

selector {
    width: value;
    height: value;
}

Example

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

👉 This sets the element width to 200px and height to 100px.

Attributes

Property	Description	Example
width	Sets element width	width: 300px;
height	Sets element height	height: 150px;
max-width	Sets maximum width	max-width: 100%;
min-width	Sets minimum width	min-width: 200px;
max-height	Sets maximum height	max-height: 400px;

Example

Complete CSS Width and Height Example

<!DOCTYPE html>
<html>
<head>
    <title>CSS Width and Height</title>
    <style>
        div {
            width: 300px;
            height: 150px;
            background-color: lightblue;
            padding: 10px;
            border: 2px solid black;
        }

        img {
            width: 200px;
            height: auto;
        }
    </style>
</head>
<body>

    <div>This box has fixed width and height.</div>

    <img src="image.jpg" alt="Sample Image">

</body>
</html>

Output

Browser Output

The <div> will appear as a fixed-size box (300px × 150px)
The box will have background color, padding, and border
The image will have a fixed width and proportional height

Browser Support

Chrome	Firefox	Edge	Safari	Opera	IE9+
✅Yes	✅Yes	✅Yes	✅Yes	✅Yes	✅Yes

Notes

Width and height can be set using:
- px (pixels)
- % (percentage)
- auto (default)
height: auto maintains aspect ratio for images
Use max-width: 100% for responsive design
Padding and border can affect total size (box model)
Avoid fixed heights for flexible layouts

Conclusion

CSS Width and Height properties are essential for controlling element size and layout. When used properly, they help create responsive and well-structured web designs.