CSS width Property

Description

The width property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.

Initial value

auto

Applies to

All elements except non-replaced inline elements, table rows, and row groups

Inherited

No

Media

Visual

Computed value

Percentage or absolute length

Animatable

Yes

CSS Version

CSS1, CSS2, CSS3

JavaScript syntax

object.style.width

Syntax

width: <length> | <percentage> | auto

Values

• <length>Specifies the width of the content area using a length unit.
• <percentage>Integer, followed by a %. The value is a percentage of the width of the parent object, whether or not it is specified explicitly. Negative values are not allowed.
• autoThe width depends on the values of other properties. See the sections below.
• border-boxIf border-box is used, the length or percentage defined will be applied to the element's border box.
• content-boxIf content-box is used, the length or percentage defined will be applied to the element's content-box.
• autoIf auto is set for the elements width, the browser will determine the width for the element.
• max-contentThe intrinsic preferred width
• min-contentThe intrinsic minimum width
• availableThe containing block width minus horizontal margin, border, and padding
• fit-contentThis will be either the large of the minimum width or the smaller of the preferred width and the available width

Example

<div class="layer1"> <p class="layer2">Lorem ipsum dolor sit amet,consectetuer adipiscing elit,seddiem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> </div> 

.layer1 { 
   width: 300px;
   background: #fc0;
   padding: 7px; 
   border: 1px solid #ccc;
} 
.layer2 { 
width: 400px; 
} 

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop
4	12	1	1	3.5	1
Tablets / Mobile
1	18	4	10.1	1	1.0

Last updated by CSSPortal on: 1st November 2019