CSS3 - Tamaño de caja
La propiedad de tamaño de caja se usa para cambiar la altura y el ancho del elemento.
Desde css2, la propiedad de la caja ha funcionado como se muestra a continuación:
ancho + relleno + borde = ancho real visible / renderizado de la caja de un elemento
altura + relleno + borde = altura real visible / renderizada de la caja de un elemento
Significa que cuando establece la altura y el ancho, parece un poco más grande que el tamaño dado porque el borde del elemento y el relleno se agregan a la altura y el ancho del elemento.
Propiedad de tamaño 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>Producirá el siguiente resultado:
La imagen de arriba tiene el mismo ancho y alto de dos elementos, pero el resultado es diferente, porque el segundo está incluido en la propiedad de relleno.
Propiedad de tamaño de caja 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>La muestra anterior tiene la misma altura y ancho con box-sizing:border-box. aquí el resultado se muestra a continuación.
Producirá el siguiente resultado:
Los elementos anteriores tienen la misma altura y ancho con el tamaño del cuadro: cuadro de borde, por lo que el resultado es siempre el mismo para ambos elementos, como se muestra arriba.