CSS width property

Description

CSS width property defines physical width of an element (box). The length units might be px, em, pt, in.

Syntax

width : auto | length | percentage | min-content | max-content

Property values

autoDefault

auto value means the width will be changed automatically according to the content.

width: auto;

length

The width of an element should be at least 30px.

width: 300px;

percentage

The width of an element should be 30% of the parent box.

width: 30%;

min-content

min-content value represents that the width of an element must be equal to or greater than the largest minimum width of some descendant item i.e. it depends upon the minimum size of child element.

In this case, the min-width of descendant element is 100px.

width: min-content;

max-content

max-content value means the width of an element must be equal to or greater than the largest maximum width of some descendant item i.e. it depends upon the miximum size of child element.

In this case, the max-width of descendant element is 200px.

width: max-content;

Applicable to

It applies to all elements except non-replaced inline.

#CSS digger
Was this article helpful?

 
arrow
We are learning width property for different values such as min-width, max-width, and length.
×

Ctrl+D