width#

#Introduction

The width CSS property specifies the width of an element. By default, the property defines the width of the border area. If box-sizing is set to content-box, however, it instead determines the width of the content area.

The min-width and max-width properties override width.

#Examples

css-apisrc/width/App.tsx

Preview

#Syntax

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

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

/* Keyword values */
width: max-content;
width: fit-content;
width: fit-content(20em);
width: auto;

#Values

• auto

  Default value. lynx will calculate and select a width for the specified element.

• <length>

  <length> defines the width as a distance value.

• <percentage>

  Defines the width as a percentage of the containing block's width.

• max-content

  The intrinsic preferred width.

• fit-content

  fit-content uses the computed size with the available space replaced by the specified argument.

#Formal definition

#Formal syntax

#Difference with the web

• By default, the property defines the width of the border area, while Web is content area.
• min-content is not supported.

#Compatibility