O que é a propriedade width do CSS?
A propriedade width do CSS define o tamanho horizontal preferencial de um elemento, geralmente para sua caixa de conteúdo. O dimensionamento da caixa, as dimensões intrínsecas, o modo de layout e as restrições de min-width ou max-width podem alterar o tamanho usado.
Como funciona a propriedade width do CSS
A propriedade width fornece um tamanho preferencial ao algoritmo de layout, sem garantir a medida final da caixa de borda. Sua porcentagem ou seu comprimento é aplicado à caixa de conteúdo com o dimensionamento content-box e à caixa de borda com border-box; palavras-chave intrínsecas e o dimensionamento automático seguem regras específicas do layout. Restrições mínimas e máximas podem prevalecer sobre o valor escolhido, e a negociação de espaço em flex ou grid pode redistribuí-lo. A propriedade é usada ao dimensionar superfícies de mídia e controles, mas elementos substituídos também têm dimensões e proporções intrínsecas.
Informações essenciais
- Com box-sizing: content-box, a largura declarada exclui o espaçamento interno e as bordas; com border-box, esses componentes são incluídos na largura declarada.
- Com o valor inicial min-width: auto, um item flex em um contêiner cujo eixo principal é horizontal e alguns itens grid, como um que ocupa uma única trilha de 1fr na horizontal, podem se recusar a encolher além do mínimo baseado em seu conteúdo, a menos que seu overflow calculado seja hidden, scroll ou auto. Definir min-width: 0 remove esse limite mínimo automático.
- Para uma imagem ou um vídeo com proporções intrínsecas, especificar uma dimensão pode permitir que a outra permaneça automática; forçar ambas as dimensões pode distorcer o conteúdo renderizado.
Quando a propriedade width do CSS é importante
Defina width para imagens responsivas, players de vídeo, painéis e controles, levando em conta o layout que os contém. Uma largura em porcentagem pode causar transbordamento quando o espaçamento interno e as bordas são adicionados com o dimensionamento content-box.