--- title: width slug: Web/CSS/width tags: - CSS - CSS Property - NeedsBrowserCompatibility - NeedsMobileBrowserCompatibility - PrecisaDeCompatibilidadeDeNavegador - PrecisadeCompatibilidadeMobile - Propriedade CSS - Reference - Referencia translation_of: Web/CSS/width ---
{{CSSRef}}

Resumo

A propriedade CSS width determina a largura da área de conteúdo de um elemento. A área de conteúdo fica dentro do preenchimento, da borda, e da margem de um elemento.

As propriedades {{cssxref("min-width")}} e {{cssxref("max-width")}} sobrescrevem o {{cssxref("width")}}.

{{cssinfo}}

Sintaxe

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

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

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

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

Valores

<length>
Veja {{cssxref("<length>")}} para possíveis unidades.
<percentage>
Especificado como {{cssxref("<percentage>")}} da largura do bloco contido. Se a largura do bloco contido depender da largura do elemento, o layout resultante é indefinido.
border-box {{experimental_inline}}
Se presente, o precedente {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} é aplicado para o border box do elemento.
content-box {{experimental_inline}}
Se presente, o precedente {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} é aplicado para o content box do elemento.
auto
O navegador irá calcular e selecionar a largura para o elemento específicado.
fill {{experimental_inline}}
Use o fill-available inline size ou fill-available block size, como um modo apropriado de escrita.
max-content {{experimental_inline}}
Da largura interna preferível.
min-content {{experimental_inline}}
Da largura interna mínina.
available {{experimental_inline}}
Do bloco contendo a largura menos a margin horizontal, borda ou preenchimento.
fit-content {{experimental_inline}}
A largura:

Sintaxe Formal

{{csssyntax}}

Exemplos

Largura padrão

p.douradinho {
  background: gold;
}
<p class="douradinho">A comunidade Mozilla produz diversos softwares incríveis.</p>

{{EmbedLiveSample('Largura_padrão', '500px', '64px')}}

Pixels e ems

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

.largura_em {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}

<div class="largura_px">Largura medida com px</div>
<div class="largura_em">Largura medida com em</div>

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

Porcentagem

.porcentagem {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
<div class="porcentagem">Largura em porcentagem</div>

{{EmbedLiveSample('Porcentagem', '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">A comunidade Mozilla produz diversos softwares incríveis.</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">A comunidade Mozilla produz diversos softwares incríveis.</p>

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

Especificações

Especificação Status Comentários
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}} {{Spec2('CSS3 Box')}} Adicionadas as palavras-chave max-content, min-content, available, fit-content, border-box, content-box
{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}} {{Spec2('CSS3 Transitions')}} Lista a largura como animável.
{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}} {{Spec2('CSS2.1')}} Determina em qual elemento vai ser aplicado.
{{SpecName('CSS1', '#width', 'width')}} {{Spec2('CSS1')}} Definição inicial
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}} {{Spec2('CSS3 Sizing')}} Adiciona novas palavras-chave para largura e altura.

Compatibilidade com navegadores

{{CompatibilityTable}}

Características Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte básico {{CompatVersionUnknown}} {{CompatGeckoDesktop("1.0")}} 4 3.5 1.0 (85)
Animação{{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 e content-box{{experimental_inline}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
fill {{CompatChrome(46.0)}}        
Características Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome para Android
Suporte básico {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}}
Animação{{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 e content-box{{experimental_inline}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
fill {{CompatNo}} {{CompatChrome(46.0)}}         {{CompatChrome(46.0)}}

[1] WebKit implementou uma variação deste valor sob o nome fill-available em Dezembro de 2013.

[2] Versões anteriores do WebKit implementaram uma versão anterior deste valore sob o nome intrinsic, mas implementam fit-content desde a versão 6.1 também.

[3] Não fixado.

[4] O antigo WebKit suporta as palavras-chave intrinsic e min-intrinsic, mas foi removido no Chrome 48.

Veja também