CSS3 - Tamanho da Caixa
A propriedade de dimensionamento da caixa é usada para alterar a altura e a largura do elemento.
Desde css2, a propriedade box tem funcionado como mostrado abaixo -
largura + preenchimento + borda = largura real visível / renderizada da caixa de um elemento
altura + preenchimento + borda = altura real visível / renderizada da caixa de um elemento
Significa que quando você define a altura e a largura, ele parece um pouco maior do que o tamanho dado, pois o elemento delimitador e preenchimento são adicionados à altura e largura do elemento.
Propriedade de dimensionamento CSS2
<html>
<head>
<style>
.div1 {
width: 200px;
height: 100px;
border: 1px solid green;
}
.div2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>Isso produzirá o seguinte resultado -
A imagem acima tem a mesma largura e altura de dois elementos, mas o resultado é diferente, porque o segundo elemento está incluído na propriedade de preenchimento.
Propriedade de dimensionamento da caixa CSS3
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>A amostra acima tem a mesma altura e largura com box-sizing:border-box. aqui o resultado é mostrado abaixo.
Isso produzirá o seguinte resultado -
Os elementos acima têm a mesma altura e largura com tamanho de caixa: caixa de borda, então o resultado é sempre o mesmo para ambos os elementos, conforme mostrado acima.