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.

↰ Previous page