Width

CSS width property sets the width of an element. This width does not include padding, borders or margins.

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

Negative length values are illegal.

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

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

CSS Syntax

width:  auto | value | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
        div {
             width: 50%;
             background-color: orange;
         }
      </style>
   </head>
   <body>

        <div>We set the  width of this text as 50%.</div>

   </body>
</html>

Let's see an example CSS length (px, em):

<!DOCTYPE html>
<html>
   <head>
      <style>
        div {
             width: 250px;
             background-color: orange;
         }
        p{
            width: 20em;
            background-color: pink;
            color: #ffffff;
          }
      </style>
   </head>
   <body>

        <div>We set the  width of this text as 250px.</div>
        <p>Here can be any paragraph.</p>

   </body>
</html>

Property Values

Value Descriptions
auto The browser will calculate a width for the specified element. This is default value.
length It defines width in px, pt, cm, etc.
% It defines width in percent of the containing element.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.


Prev
Next

Related articles