CSS width Property

The CSS width property sets the width of an element. The width does not include border, padding or margin.

The width property applies to all elements except non-replaced or inline elements, table rows and row groups (i.e. <thead>, <tfoot> and <tbody>).

The property takes a CSS length (px, pt, em, and so on), a percentage, or the keyword auto.

We should mention that the percentage used for this property is based on the parent element (i.e. the width of the containing block). For absolutely positioned elements having a containing block based on a block container element, the percentage is calculated regarding the width of the element’s padding box.

The width property can be overridden by the properties of min-width and max-width.

Negative length values are illegal.

Many values of the width property added in the CSS3 specification are still experimental.

Initial Value auto
Applies to All elements.
Inherited No.
Animatable Yes. The width of an element is animatable.
Version CSS1
DOM Syntax Object.style.width = "300px";

Syntax

width:  auto | lenght | initial | inherit;

Example of the width property specified in “%”:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      width: 50%;
      background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Width property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
  </body>
</html>

Result


In the given example the width of the text is 50%.

In the following example, the width of the first element is 250px and the one of the second element is 25em:

Example of the width property specified in “px” and “em”:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.t1 {
      width: 250px;
      border: 1px solid black;  
      background-color: #1c87c9;
      }
      div.t2 {
      width: 25em;
      border: 1px solid black;  
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Width property example</h2>
    <h3>width: 250px</h3>
    <div class="t1">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <h3>width: 25em</h3>
    <div class="t2">
      Lorem Ipsum is simply dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Values

Value Description
auto The browser will calculate a width for the specified element. This is default value.
length Defines width in px, pt, cm, etc.
% Defines width in percent of the containing element.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support
v 12.0+ 1.0+ 1.0+ 3.5+

Prev
Next

Do you find this helpful?

Related articles