CSS width Property (original) (raw)

Last Updated : 22 May, 2026

The CSS width property is used to define the horizontal size of an element on a webpage. It helps control the layout and appearance of content such as images, divs, and text containers.

The width property supports units like px, %, em, and cm.
It affects only the content area unless box-sizing: border-box is applied.
The min-width and max-width properties can limit or override the defined width.

Try CSS Width Property

**Syntax:

width: auto | value | initial | inherit;

**Note: The width property for the element does not involve the padding, border & margin.

**Default Value:

Its default value is auto.

**Property Values:

Value	Description
auto	Default value; the browser calculates the width of the element automatically.
value	Sets the width using units like pixels (px), percentages (%), or centimeters (cm). Cannot be negative.
initial	Sets the width property to its default value.
inherit	Inherits the width property from its parent element.

All the properties are described well with the example below.

**Setting Width to auto

It is used to set the width property to its default value. If the width property is set to auto then the browser calculates the width of the element.

**Syntax

width: auto;

**Example: This demonstrates the use of the width property whose value is set to auto.

HTML `

CSS width Property

<style>
    .gfg {
        width: auto;
        color: white;
        font-size: 20px;
        background-color: rgb(0, 150, 0);
    }

    h2 {
        font-size: 20px;
        color: black;
    }
</style>

CSS width Property

This is an example of auto width property

**Setting Width with Specific Units

It is used to set the width in the form of pixels(px), Percentage(%), centimetre(cm) etc. The width can not be negative.

**Syntax:

width: value;

Example: This demonstrates the use of the width property whose value can be defined in pixels(px), Percentage(%), centimetre(cm) etc.

HTML `

CSS Width Property

<style>
    .gfg {
        width: 150px;
        color: white;
        font-size: 20px;
        background-color: RGB(0, 150, 0);
    }

    .gfg1 {
        width: 50%;
        color: white;
        font-size: 20px;
        background-color: RGB(0, 200, 0);
    }

    h2 {
        color: black;
    }
</style>

CSS width Property

An example of width property in form of pixels.

<p class="gfg1">
    An example of width property in form of percentage.
</p>

**Setting Width to initial

It is used to set an element’s CSS property to its default value.

**Syntax:

width: initial;

**Example: This demonstrates the use of the width property whose value is set to the initial.

HTML `

CSS Width Property

<style>
    .gfg {
        width: initial;
        color: white;
        font-size: 20px;
        background-color: RGB(0, 150, 0);
    }

    h2 {
        color: black;
    }
</style>

CSS width Property

An example of width property for its initial width value.

**Inheriting Width from Parent

It is used to inherit a property to an element from its parent element property value.

**Syntax

width: inherit;

**Example: This demonstrates the width property set to inherit.

HTML `

Width: inherit Example

<style>
    .parent {
        width: 300px;
        border: 1px solid black;
    }

    .child {
        width: inherit;
        border: 1px solid red;
    }
</style>

Parent div

Child div (inherits width)