CSS width Property

CSS's width property is used to specify the width of text and images. The width of text and images can be specified in pixels (px), percentages (%), centimetres (cm), and other units.

Padding, borders, and margins are not included in the width property. The min-width and max-width properties override the width property.

The width property sets the width of the content area by default, but if the box-sizing property is set to border-box, it sets the width of the border area.

Syntax

width: auto | value | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        width: auto;
        border: 1px solid black;
    }
    .ex2 {
        width: 200px;
        border: 1px solid black;
    }
    .ex3 {
        width: 50%;
        border: 1px solid black;
    }
</style>
</head>
<body>

<h1>The width property</h1>

<h2>width: auto (default)</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</div>

<h2>width: 200px</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</div>

<h2>width: 50%</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</div>

</body>
</html>

Preview

Property Values

Value	Description
auto	The default value. The width is calculated by the browser.
length	Defines the width in pixels, centimeters, and so on. Learn more about length units.
%	Defines the width of the containing block in percentages.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
width	1.0	1.0	1.0	4.0	3.5

widows

word-break

CSS width Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us