width - HTML CSS CSS Property

HTML CSS examples for CSS Property:width

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. width

Description

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

This content does not include padding, borders, or margins.

The following table summarizes the width Property.

Item Value
Default value: auto
Applies to:All elements except non-replaced inline elements, table rows, and row groups
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


width:      length | percentage | auto | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
length Set the width as a length value in px, pt, cm, em, etc. Negative values are not allowed.
percentage Set the width in percentage with respect to the width of the element's containing block. Negative values are not allowed.
auto The browser will calculate the width. This is default value.
initialSets this property to its default value.
inherittake the value of its parent element width property.

The example below shows the width property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS width property</title>
  <style type="text/css">
    p {<!--from  w  w w  . jav a 2 s.  c om-->
      width: 300px;
      background-color: #f0e68c;
    }
    img {
      width: 100px;
      border: 5px solid #708090;
    }
    </style>
 </head>
 <body>
  <div>
   <img src="https://www.java2s.com/style/demo/Opera.png" alt="Logo">
  </div>
 </body>
</html>

Related Tutorials