width

La propietat CSS width especifica l'amplada d'un element. Per defecte, estableix l'amplada de l'àrea de contingut. però si box-sizing està establert a border-box, aquest determina l'amplada de l'àrea de vora.

Les propietats min-width i max-width anul·la width.

Sintaxi

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

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

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

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

La propietat width s'especifica com a:

Valors

<length>
Defineix l'amplada com un valor absolut.
<percentage>
Defineix l'amplada com a percentatge de l'amplada del bloc que conté.
auto
El navegador calcularà i seleccionarà una amplada per a l'element especificat.
max-content
L'amplada intrínseca preferida.
min-content
L'amplada mínima intrínseca.
fit-content(<length-percentage>)
Utilitza la fórmula fit-content amb l'espai disponible substituït per l'argument especificat, i. e. min(max-content, max(min-content, <length-percentage>)).

Qüestions d'accessibilitat

Ens hem d'assegurar que els elements establerts amb un width no estan truncats i que no enfosqueixin altres continguts quan la pàgina s'ampliï per augmentar la mida del text.

Definició formal

Initial valueauto
Applies toall elements but non-replaced inline elements, table rows, and row groups
Inheritedno
Percentagesrefer to the width of the containing block
Computed valuea percentage or auto or the absolute length
Animation typea length, percentage or calc();

Sintaxi formal

auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)

where
<length-percentage> = <length> | <percentage>

Exemples

Amplada per defecte

p.goldie {
  background: gold;
}
<p class="goldie">The Mozilla community produces a lot of great software.</p>

Pixels i ems

.px_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}
<div class="px_length">Width measured in px</div>
<div class="em_length">Width measured in em</div>

Percentatge

.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
<div class="percent">Width in percentage</div>

max-content

p.maxgreen {
  background: lightgreen;
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
  width: max-content;
}
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>

min-content

p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
}
<p class="minblue">The Mozilla community produces a lot of great software.</p>

Epecificacions

Specification Status Comment
CSS Box Sizing Module Level 4
The definition of 'width' in that specification.
Editor's Draft
CSS Box Sizing Module Level 3
The definition of 'width' in that specification.
Working Draft Added the max-content, min-content, fit-content keywords.
CSS Level 2 (Revision 1)
The definition of 'width' in that specification.
Recommendation Precises on which element it applies to.
CSS Level 1
The definition of 'width' in that specification.
Recommendation Initial definition.

BCD tables only load in the browser

Veure també