As propriedades CSS height e width são usadas para definir o altura e largura de um elemento.
A propriedade CSS max-width é usada para definir a largura máxima de um elemento.
Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 50px;
width: 100%;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>CSS height and width properties</h2>
<div>This div element has a height of 50 pixels and a width of 100%.</div>
</body>
</html>
As propriedades height e width são usadas para definir o altura e largura de um elemento.
As propriedades de altura e largura não incluem preenchimento, bordas ou margens. Define a altura/largura da área dentro do preenchimento, borda e margem do o elemento.
As propriedades altura e largura pode ter os seguintes valores:
auto - Este é o padrão. O navegador calcula a altura e largura
comprimento - Define a altura/largura em px, cm, etc.
% - Define a altura/largura em porcentagem de o bloco que contém
initial - Define a altura/largura para seu valor padrão
herdar - A altura/largura será herdado de seu valor pai
Defina a altura e a largura de um elemento <div>:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 200px and a width of 50%.</div>
</body>
</html>
Defina a altura e a largura de outro elemento <div>:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 100px and a width of 500px.</div>
</body>
</html>
Observação: lembre-se de que as propriedades height e width não incluem preenchimento, bordas , ou margens! Eles definem a altura/largura da área dentro do preenchimento, borda, e margem do elemento!
A propriedade max-width é 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 porcentagem (%) do contendo bloco ou definido como nenhum (isso é 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 o elemento (500px). O navegador então adiciona uma barra de rolagem horizontal à página.
Usar max-width em vez disso, nesta situação, melhorará o manuseio de janelas pequenas pelo navegador.
Dica: arraste a janela do navegador para uma largura menor que 500 px para ver a diferença entre os dois divs!
Observação: se por algum motivo você usar ambos os propriedade largura e o propriedade max-width no mesmo elemento e o valor do A propriedade width é maior que a propriedade largura máxima; o A propriedade max-width será usada (e o A propriedade width será ignorada).
Este elemento <div> tem uma altura de 100 pixels e um largura máxima de 500 pixels:
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}Experimente você mesmo →
<!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>
<div>This div element has a height of 100px and a max-width of 500px.</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
Defina a altura e largura dos elementos
<!DOCTYPE html>
<html>
<head>
<style>
img.one {
height: auto;
}
img.two {
height: 200px;
width: 200px;
}
div.three {
height: 300px;
width: 300px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of elements</h2>
<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>
<p>Sized image (200x200 pixels):</p>
<img class="two" src="ocean.jpg" width="300" height="300"><br>
<p>The height and width of this div element is 300px:</p>
<div class="three"></div>
</body>
</html>
Este exemplo demonstra como definir a altura e a largura de diferentes elementos.
Defina a altura e largura de uma imagem usando porcentagem
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
}
img.one {
height: auto;
width: auto;
}
img.two {
height: 50%;
width: 50%;
}
</style>
</head>
<body>
<h2>Set the height and width in %</h2>
<p>Resize the browser window to see the effect.</p>
<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>
<p>Sized image (in %):</p>
<img class="two" src="ocean.jpg" width="300" height="300">
</body>
</html>
Este exemplo demonstra como definir a altura e a largura de uma imagem usando um valor percentual.
Definir largura mínima e largura máxima de um elemento
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 400px;
min-width: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-width and min-width of an element</h2>
<p>Resize the browser window to see the effect.</p>
<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>
</body>
</html>
Este exemplo demonstra como definir uma largura mínima e uma largura máxima de um elemento usando um valor de pixel.
Definir altura mínima e altura máxima de um elemento
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-height: 600px;
min-height: 400px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-height and min-height of an element</h2>
<p>Resize the browser window to see the effect.</p>
<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>
</body>
</html>
Este exemplo demonstra como definir uma altura mínima e uma altura máxima de um elemento usando um valor de pixel.
Define a altura de um elemento
Define a altura máxima de um elemento
Define a largura máxima de um elemento
Define a altura mínima de um elemento
Define a largura mínima de um elemento
Define a largura de um elemento