--- title: width slug: Web/CSS/width tags: - Propiedad CSS - Referencia translation_of: Web/CSS/width ---
{{CSSRef}}

Resumen

La propiedad CSS width especifica la anchura del area de contenido de un elemento. El área de contenido está dentro del padding, borde, y margen del elemento.

Las propiedades {{cssxref("min-width")}} y {{cssxref("max-width")}} sobreescriben el valor de {{cssxref("width")}}.

{{cssinfo}}

Sintaxis

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

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

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

/* Valores globales */
width: inherit;
width: initial;
width: unset;

Valores

<length>
Ver {{cssxref("<length>")}} para unidades disponibles.
<percentage>
Especificado con el tipo {{cssxref("<percentage>")}} como porcentaje de la anchura del bloque contenedor. Si la anchura del bloque contenedor depende de la anchura del elemento, la presentación resultante es indefinida.
border-box {{experimental_inline}}
Si está presente, el valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} precedente es aplicado a los límites del borde del elemento.
content-box {{experimental_inline}}
Si está presente, el valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} precedente será aplicado a los límites de contenido del elemento.
auto
El navegador calculará y seleccionará la anchura para el elemento especificado.
fill {{experimental_inline}}
Use el tamaño fill-available para elementos inline o block, según sea más apropiado para el modo de escritura.
max-content {{experimental_inline}}
La anchura preferida intrínseca.
min-content {{experimental_inline}}
La anchura mínima intrínseca.
available {{experimental_inline}}
La anchura del bloque contenedor menos su margen horizontal, borde y padding.
fit-content {{experimental_inline}}
El mayor entre:

Sintaxis formal

{{csssyntax}}

Ejemplos

Anchura predeterminada

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

{{EmbedLiveSample('Default_width', '500px', '64px')}}

Píxeles y 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>

{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}

Porcentaje

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

{{EmbedLiveSample('Percentage', '500px', '64px')}}

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 */
}
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>

{{EmbedLiveSample('max-content', '500px', '64px')}}

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>

{{EmbedLiveSample('min-content', '500px', '155px')}}

Especificaciones

Especificación Estado Comentarios
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}} {{Spec2('CSS3 Box')}} Añade las palabras clave max-content, min-content, available, fit-content, border-box, content-box.
{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}} {{Spec2('CSS3 Transitions')}} Incluye width como propiedad que puede ser animada.
{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}} {{Spec2('CSS2.1')}} Especifica a qué elementos es aplicable.
{{SpecName('CSS1', '#width', 'width')}} {{Spec2('CSS1')}} Definición inicial
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}} {{Spec2('CSS3 Sizing')}} Añade nuevas palabras clave de tamaño para width y height

Compatibilidad de navegadores

{{CompatibilityTable}}

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico {{CompatVersionUnknown}} {{CompatGeckoDesktop("1.0")}} 4 3.5 1.0 (85)
Capacidad de ser animada{{experimental_inline}} {{CompatUnknown}} {{CompatGeckoDesktop("16.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
max-content{{experimental_inline}} {{CompatChrome(22.0)}} {{property_prefix("-webkit")}}
{{CompatChrome(46.0)}} [1]		 {{CompatGeckoDesktop("1.9")}}{{property_prefix("-moz")}} {{CompatUnknown}} 15 {{property_prefix("-webkit")}} 2.0 (421) (intrinsic value)
6.1 {{property_prefix("-webkit")}}
min-content{{experimental_inline}}

{{CompatChrome(22.0)}} [4] {{property_prefix("-webkit")}}
{{CompatChrome(46.0)}} [1]

 {{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}} {{CompatUnknown}} 15 {{property_prefix("-webkit")}} 2.0 (421) (min-intrinsic value)
6.1 {{property_prefix("-webkit")}}
available{{experimental_inline}} {{CompatNo}} {{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}[1]
fill-available{{experimental_inline}} {{CompatChrome(22.0)}} {{property_prefix("-webkit")}} {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} 6.1 {{property_prefix("-webkit")}}
fit-content{{experimental_inline}} {{CompatChrome(22.0)}} [4] {{property_prefix("-webkit")}}
{{CompatChrome(46.0)}} [1]		 {{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}} {{CompatUnknown}} 15 {{property_prefix("-webkit")}} 6.1 {{property_prefix("-webkit")}}[2]
border-box y content-box{{experimental_inline}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
fill {{CompatChrome(46.0)}}        
Característica Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Soporte básico {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}}
Capacidad de ser animada{{experimental_inline}} {{CompatUnknown}} {{CompatUnknown}} {{CompatGeckoDesktop("16.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
max-content{{experimental_inline}} {{CompatNo}} {{CompatChrome(46.0)}} [1] {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatChrome(46.0)}} [1]
min-content{{experimental_inline}} {{CompatNo}} {{CompatChrome(46.0)}} [1] {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatChrome(46.0)}} [1]
available{{experimental_inline}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
fill-available{{experimental_inline}} {{CompatNo}} {{CompatChrome(46.0)}} [1] {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatChrome(46.0)}} [1]
fit-content{{experimental_inline}} {{CompatNo}} {{CompatChrome(46.0)}} [1] {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatChrome(46.0)}} [1]
border-box y content-box{{experimental_inline}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
fill {{CompatNo}} {{CompatChrome(46.0)}}         {{CompatChrome(46.0)}}

[1] WebKit implementa una variante a este valor con el nombre fill-available a partir de 2013.

[2] Las versiones anteriores de WebKit implementaban una versión anterior de este valor con nombre intrinsic, pero implementan además fit-content desde la versión 6.1.

[3] Sin prefijo.

[4] Soporte a las antiguas palabras clave intrinsic y min-intrinsic de Webkit, pero removido en Chrome 48.

Véase también