width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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 min-width e max-width sobrescrevem o width.

Initial valueauto
Aplica-se aall elements but non-replaced inline elements, table rows, and row groups
Inheritednão
Percentagesrefer to the width of the containing block
Computed valuea percentage or auto or the absolute length
Animation typea length, percentage or calc();

Sintaxe

css
/* 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 <length> para possíveis unidades.

<percentage>

Especificado como <percentage> da largura do bloco contido. Se a largura do bloco contido depender da largura do elemento, o layout resultante é indefinido.

border-box

Se presente, o precedente <length> ou <percentage> é aplicado para o border box do elemento.

content-box

Se presente, o precedente <length> ou <percentage> é aplicado para o content box do elemento.

auto

O navegador irá calcular e selecionar a largura para o elemento específicado.

fill

Use o fill-available inline size ou fill-available block size, como um modo apropriado de escrita.

max-content

Da largura interna preferível.

min-content

Da largura interna mínina.

available

Do bloco contendo a largura menos a margin horizontal, borda ou preenchimento.

fit-content

A largura:

  • do comprimento interno mínimo.
  • do menor comprimento interno preferível e da largura disponível.

Sintaxe Formal

width = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           

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

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <intrinsic-size-keyword>  |
  <calc-size()>             |
  any                       |
  <calc-sum>                

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Exemplos

Largura padrão

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

Pixels e ems

css
.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;
}
html
<div class="largura_px">Largura medida com px</div>
<div class="largura_em">Largura medida com em</div>

Porcentagem

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

Exemplo utilizando "max-content"

css
p.maxgreen {
  background: lightgreen;
  width: intrinsic; /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content; /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}
html
<p class="maxgreen">
  A comunidade Mozilla produz diversos softwares incríveis.
</p>

Exemplo utilizando "min-content"

css
p.minblue {
  background: lightblue;
  width: -moz-min-content; /* Firefox */
  width: -webkit-min-content; /* Chrome */
}
html
<p class="minblue">A comunidade Mozilla produz diversos softwares incríveis.</p>

Especificações

Specification
CSS Box Sizing Module Level 4
# width-height-keywords
CSS Box Sizing Module Level 4
# sizing-values

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também