CSS width Property

CSS width property sets the width of the content area of an element.

As the width by default sets the width of the content area of an element only. Therefore, the element’s margin, padding, and border are not included in its width.

The width value can be specified in any valid CSS length format such as px, em, rem, cm, etc. Try out the example below to see how it works:

Example:

div{
  width: 200px;
  background: yellow;
}

The width of the element can also be specified in %. Here, the width value is calculated from the width of the parent element.

In the example below, the child <div> element takes 50% width of its parent <div> element i.e. 50% of 400px = 200px;. Try out the below example to see how it works:

Example:

.parent{
  width: 400px;
}
.child{
  width: 50%;
}

CSS Syntax

The width property has the following syntax:

width: auto|length|percentage|initial|inherit;

Property Values

The width property accepts the following values:

autoThe browser itself calculates the width of the element to fit in the content. This is the default value.
lengthSets a constant width in any valid CSS length formats like: ‘px’, ’em’, ‘rem’, ‘cm’, etc.
percentageSets the width in percentage(%). The percentage value is calculated from the width of the parent element.
initialSets the width property to its default value(auto).
inheritInherits the width property from the parent element.

General Info

Default Valueauto
InheritedNo
JavaScript Usageelement.style.width = “200px”