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.
selector {
width: value;
height: value;
}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
<!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: automaintains 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.