CSS Box Model
CSS Width and Height
Set physical and logical dimensions while using min/max constraints, percentages, intrinsic content, and box sizing to prevent overflow.
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. The supporting concepts are explained in Box Sizing and Intrinsic Sizing.
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; |
Prefer constraints to fixed dimensions
Fixed heights frequently fail when text wraps, fonts change, or the user zooms. For content boxes, prefer an automatic block size with min-block-size when a minimum shape is required. Use max-inline-size to limit readable line length while allowing the element to shrink. Percentages also need a definite containing size; otherwise an auto result may be used.
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>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| width and height | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
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: 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.