Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Box Model

CSS Width and Height

Written by Updated

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

PropertyDescriptionExample
widthSets element widthwidth: 300px;
heightSets element heightheight: 150px;
max-widthSets maximum widthmax-width: 100%;
min-widthSets minimum widthmin-width: 200px;
max-heightSets maximum heightmax-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="https://picsum.photos/seed/sample/600/400" alt="Sample Image">

</body>
</html>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
width and height11211

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: 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 OutlineNextNormal Flow