CSS Box Model

CSS Width and Height

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

css

selector {
    width: value;
    height: value;
}

Example

css

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

html

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

html

<div>

Browser Support

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

Notes

Width and height can be set using: <ul class="wp-block-list"> <li>px (pixels)</li> <li>% (percentage)</li> <li>auto (default)</li> </ul>
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.

PreviousCSS Outline