As propriedades height e width sã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.
Altura e largura do CSS Valores
As propriedades heighte widthpodem ter os seguintes valores:
auto– Isso é o padrão. O navegador calcula a altura e a largura
length – Define a altura / largura em px, cm etc.
% – Define a altura / largura em porcentagem do bloco que contém
initial – Define a altura / largura como seu valor padrão
inherit – A altura / largura será herdada do valor pai
Exemplos de altura e largura de CSS
Este elemento tem uma altura de 200 pixels e uma largura de 50%
Exemplo
Defina a altura e a largura de um elemento <div>:
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
Este elemento tem uma altura de 100 pixels e uma largura de 500 pixels.
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!
Definir largura máxima
A max-width propriedade é usada para definir a largura máxima de um elemento.
A max-width pode ser especificada em valores de comprimento , como px, cm, etc., ou em percentagem (%) do bloco que contém, ou conjunto de nenhuma (isto é padrão. Meios que não há nenhuma largura máxima).
O problema com o <div>exposto acima ocorre quando a janela do navegador é menor que a largura do elemento (500px). O navegador adiciona uma barra de rolagem horizontal à página.
O uso max-width, nessa situação, melhorará o manuseio de pequenas janelas pelo navegador.
Dica: arraste a janela do navegador para menos de 500 px de largura, para ver a diferença entre as duas divs!
Este elemento tem uma altura de 100 pixels e uma largura máxima de 500 pixels.
Nota: O valor da max-width propriedade substitui width.
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
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>
<p>This div element has a height of 100px and a max-width of 500px:</p>
<div></div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
<< Anterior Preenchimento CSS
Deixe um comentário