Propriedade CSS width
A propriedade CSS width define a largura de um elemento. Experimente exemplos com cada valor dessa propriedade.
A propriedade CSS width define a largura da área de conteúdo de um elemento — a caixa interna que contém texto e elementos filhos. Por padrão, essa largura não inclui a borda, o padding ou a margem: esses valores são somados por fora, portanto a largura total renderizada do elemento é width + padding + border.
Esta página aborda o que width mede, todos os valores que aceita (incluindo as palavras-chave intrínsecas modernas min-content, max-content e fit-content), como as porcentagens são resolvidas e o detalhe do modelo de caixa que confunde a maioria dos iniciantes.
Como width interage com o modelo de caixa
A forma como width é medida depende da propriedade box-sizing:
content-box(o padrão) —widthdimensiona apenas o conteúdo. Padding e borda são adicionados fora dele. Uma caixa comwidth: 200px; padding: 20px; border: 5px solidé renderizada com 250px de largura.border-box—widthdimensiona o conteúdo, o padding e a borda juntos. As mesmas declarações resultam em exatamente 200px de largura, e a área de conteúdo encolhe para abrir espaço.
Como o border-box torna os tamanhos dos elementos previsíveis, muitas folhas de estilo o definem globalmente:
*,
*::before,
*::after {
box-sizing: border-box;
}A quais elementos width se aplica
A propriedade width se aplica a todos os elementos exceto elementos inline não substituídos (como um simples <span>), linhas de tabela e grupos de linhas (ou seja, <thead>, <tfoot> e <tbody>). Para atribuir uma largura a um elemento inline, defina display: inline-block ou display: block primeiro.
A propriedade aceita um comprimento CSS (px, pt, em, entre outros), uma porcentagem ou uma palavra-chave como auto ou max-content.
Uma porcentagem é resolvida em relação à largura do elemento pai (o bloco contêiner). Para elementos com posicionamento absoluto, a porcentagem é calculada em relação à largura da caixa de padding do bloco contêiner.
A propriedade width pode ser sobrescrita por min-width e max-width: um max-width menor que width tem precedência, assim como um min-width maior que width. A propriedade complementar é height.
Valores de comprimento negativos são inválidos.
| Valor Inicial | auto |
|---|---|
| Aplica-se a | Todos os elementos exceto elementos inline não substituídos, linhas de tabela e grupos de linhas. |
| Herdado | Não. |
| Animável | Sim. A largura de um elemento é animável. |
| Versão | CSS1 |
| Sintaxe DOM | Object.style.width = "300px"; |
Sintaxe
Sintaxe da propriedade CSS width
width: auto | length | percentage | initial | inherit | fit-content | min-content | max-content | stretch;Exemplo da propriedade width especificada em "%":
Exemplo da propriedade CSS width com valor em %
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 50%;
background-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Width property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Resultado
No exemplo acima, a largura do contêiner div é 50% — metade da largura de seu elemento pai (aqui, o <body>).
No exemplo a seguir, a largura do primeiro elemento é 250px e a do segundo elemento é 25em:
Exemplo da propriedade width especificada em "px" e "em":
Exemplo da propriedade CSS width com valores em px e em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.t1 {
width: 250px;
border: 1px solid black;
background-color: #1c87c9;
}
div.t2 {
width: 25em;
border: 1px solid black;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Width property example</h2>
<h3>width: 250px</h3>
<div class="t1">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>width: 25em</h3>
<div class="t2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Palavras-chave de dimensionamento intrínseco
Além de comprimentos fixos e porcentagens, width aceita palavras-chave que dimensionam um elemento com base em seu conteúdo, e não em seu contêiner:
max-content— a largura que o conteúdo prefere sem quebra de linha. Para um parágrafo, é o texto completo em uma única linha.min-content— a largura mínima sem causar transbordamento, ou seja, a largura da palavra inquebrável mais longa.fit-content— cresce com o conteúdo comomax-content, mas nunca ultrapassa o espaço disponível, fazendo a quebra de linha ao atingir a borda do contêiner. Ideal para caixas do tipo "encolher para caber", como botões ou emblemas.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
margin-bottom: 10px;
padding: 5px;
}
.min { width: min-content; }
.max { width: max-content; }
.fit { width: fit-content; }
</style>
</head>
<body>
<div class="min">width: min-content</div>
<div class="max">width: max-content</div>
<div class="fit">width: fit-content</div>
</body>
</html>A caixa min-content é tão estreita quanto a palavra mais longa, a caixa max-content se estende para caber toda a linha, e a caixa fit-content fica entre as duas dependendo do espaço disponível.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| auto | O navegador calculará uma largura para o elemento especificado. Este é o valor padrão. | Experimente » |
| length | Define a largura em px, pt, cm, etc. | Experimente » |
| percentage | Define a largura em porcentagem do elemento contêiner. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade de seu elemento pai. | |
| fit-content | Calcula a largura com base no tamanho intrínseco do conteúdo. | Experimente » |
| min-content | Calcula a largura com base no tamanho mínimo do conteúdo. | Experimente » |
| max-content | Calcula a largura com base no tamanho máximo do conteúdo. | Experimente » |
| stretch | Estica o elemento para preencher o contêiner. | Experimente » |
Erros comuns
- Uma largura em porcentagem sem largura definida no elemento pai. Se a largura do pai for
auto, uma porcentagem pode não ser resolvida como esperado. Atribua uma largura explícita ao bloco contêiner (ou confie na largura total natural de um elemento de bloco). - Padding e borda expandem o layout. Com o padrão
content-box, adicionar padding a um elemento com largura 100% faz com que ele transborde seu pai. Mude parabox-sizing: border-boxpara manter o total em 100%. widthem elementos inline é ignorado. Definadisplay: inline-blockoublockprimeiro.- Responsividade. Prefira
max-widtha umawidthfixa para layouts fluidos:max-width: 600pxpermite que uma caixa encolha em telas pequenas enquanto limita seu tamanho nas grandes.