Como definir largura e altura de elementos com CSS
As propriedades width e height definem a largura e a altura de um elemento.
Carregando...Você pode usar diferentes unidades para definir tamanhos.
Pixels (px): valor fixo, independente do tamanho da tela.
Carregando...Porcentagem (%): relativo ao tamanho do elemento pai.
Carregando...Viewport (vw e vh): relativo ao tamanho da janela do navegador. 1vw equivale a 1% da largura da janela, 1vh equivale a 1% da altura.
Carregando...Além de definir um tamanho fixo, você pode estabelecer limites com min-width, max-width, min-height e max-height.
Carregando...Essa combinação de width: 100% com max-width é muito usada para criar layouts que se adaptam a telas menores sem ficarem grandes demais em telas maiores.
Carregando...Quando você não define width e height, o navegador decide o tamanho automaticamente. Elementos de bloco como div e p ocupam 100% da largura disponível por padrão. Elementos inline como span ocupam só o espaço do seu conteúdo.
Assim como o padding, definir width sem box-sizing: border-box pode gerar surpresas. O padding e a borda somam por padrão e fazem o elemento crescer além do que você definiu.
Carregando...