CSS width Property

The CSS width property is used to specify the width of the content area of an element. The content area is the area inside the padding, border, and margin of the element. Keep in mind that the min-width and max-width properties override the width value set using width.

The initial value of width property is auto. You can apply it to all elements except non-replaced inline elements, table rows, and row groups. This property is not inheritable. The final computed value of this property is a percentage, auto or the absolute length. This property is animatable as a length, percentage or calc().

One thing that you should keep in mind is that by default, any padding added to the element will increase the total computed width of the element. This means that you may not always end up with the expected width by just using the width property. For example, an element with width: 250px and padding: 25px will render to a width of 300px.

Syntax

This is the formal syntax for using width property.

width: [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

Here are some examples of using this property.

/* <length> values */
width: 300px;
width: 25em;

/* <percentage> value */
width: 75%;

/* Keyword values */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/* Global values */
width: inherit;
width: initial;
width: unset;

Acceptable Values

<length>

This is used to specify the width of an element using a length unit. When the keyword border-box is present, the length sets the size of the border box. When the keyword content-box is present, the length sets the size of the content box. When no keyword is present, the box-sizing property is used to determine which size shoud be set for the element.

<percentage>

This value is used to specify the width of an element as a percentage of the width of the element’s container.

Please note that for absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element and not the width of the content box of that element.

If the width of the containing block depends on the width of the element, the resulting layout is undefined.

auto

In this case, the browser will calculate and select a width for the element.

available

When this value is specified, the element’s width is equal to the containing block width minus the current element’s margin, border, and padding.

max-content

The is the intrinsic preferred width. The max-content width is roughly equal to the size of content if no “soft” line breaks were inserted.

min-content

The is the intrinsic minimum width. The min-content width is roughly equal to the narrowest size the box can get by breaking all lines at all possible break points. In most cases its width will depend on the width of its widest inline element.

fit-content

The value of fit-content is the larger of:

  • the min-content width.
  • the smaller of the max-content and available width.

The fit-content value can prove useful when you want to define the width of an element based on other elements inside it with unknown widths.

Working Examples

See the Pen CSS width Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The width property is supported in all major browsers like Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Further Reading

  1. Read more about the CSS <width> property on MDN.
  2. You can also read the CSS <width> property on CSSWG.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top