CSS Altura e Largura
O CSS heighte widthas propriedades são usados para definir a altura e a largura de um elemento.
A propriedade CSS max-widthé usada para definir a largura máxima de um elemento.
CSS Configurando altura e largura
As propriedades heighte widthsão usadas para definir a altura e a largura de um elemento.
As propriedades de altura e largura não incluem preenchimento, bordas ou margens. Ele define a altura/largura da área dentro do preenchimento, borda e margem do elemento.
Valores de altura e largura CSS
As propriedades heighte widthpodem ter os seguintes valores:
auto- Este é o padrão. O navegador calcula a altura e a larguralength- Define a altura/largura em px, cm etc.%- Define a altura/largura em porcentagem do bloco que contéminitial- Define a altura/largura para seu valor padrãoinherit- A altura/largura será herdada de seu valor pai
Exemplos de altura e largura CSS
Exemplo
Defina a altura e a largura de um elemento <div>:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
Exemplo
Defina a altura e a largura de outro elemento <div>:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}
Nota: Lembre-se de que as propriedades heighte widthnão incluem preenchimento, bordas ou margens! Eles definem a altura/largura da área dentro do preenchimento, borda e margem do elemento!
Configurando a largura máxima
A max-widthpropriedade é usada para definir a largura máxima de um elemento.
O max-widthpode ser especificado em valores de comprimento , como px, cm, etc., ou em porcentagem (%) do bloco que o contém, ou definido como nenhum (este é o padrão. Significa que não há largura máxima).
O problema com o <div>acima ocorre quando a janela do navegador é menor que a largura do elemento (500px). O navegador adiciona uma barra de rolagem horizontal à página.
Usar max-widthem vez disso, nessa situação, melhorará o manuseio de janelas pequenas pelo navegador.
Dica: Arraste a janela do navegador para uma largura menor que 500px, para ver a diferença entre as duas divs!
Nota: Se, por algum motivo, você usar a
widthpropriedade e a
max-widthpropriedade no mesmo elemento e o valor da
widthpropriedade for maior que a
max-widthpropriedade; a
max-widthpropriedade será usada (e a
widthpropriedade será ignorada).
Exemplo
Este elemento <div> tem uma altura de 100 pixels e uma largura máxima de 500 pixels:
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}
Experimente você mesmo - Exemplos
Este exemplo demonstra como definir a altura e a largura de diferentes elementos.
Este exemplo demonstra como definir a altura e a largura de uma imagem usando um valor percentual.
Este exemplo demonstra como definir uma largura mínima e uma largura máxima de um elemento usando um valor de pixel.
Este exemplo demonstra como definir uma altura mínima e uma altura máxima de um elemento usando um valor de pixel.
Todas as propriedades de dimensão CSS
| Property | Description |
|---|---|
| height | Sets the height of an element |
| max-height | Sets the maximum height of an element |
| max-width | Sets the maximum width of an element |
| min-height | Sets the minimum height of an element |
| min-width | Sets the minimum width of an element |
| width | Sets the width of an element |