Característica Box Sizing en CSS

por
CSS Box Sizing

Tabla de contenidos

La propiedad y características del box-sizing en CSS se utiliza para modificar el modelo de caja CSS predeterminado (es decir, el modelo de caja CSS) utilizado para calcular tanto el ancho y la altura de los elementos el box sizing.

Valor inicialcontent-box
Aplicado aTodos los elementos en los que se puede especificar un valor para la propiedad width y en height.
HeredableNo
MóvilNo
Valor calculadoComo se especificó
/* palabras reservadas */ 
box-sizing: content-box;
box-sizing: border-box;

/* valores globales */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

De forma predeterminada, el ancho y el alto se aplican al cuadro de contenido del elemento, y si el elemento tiene un marco ( border) o una nota al pie ( padding). Este se agregará al ancho y alto para completar las dimensiones del elemento que se muestra en la pantalla. Esto significa que cuando establece el ancho y el alto debe tener en cuenta el valor de la nota al pie y un marco si los agrega, lo cual es especialmente difícil cuando el diseño de su página es receptivo.

La propiedad se puede utilizar box-sizing para modificar este comportamiento:

  • El valor content-boxes el valor predeterminado que le proporciona el comportamiento predeterminado descrito anteriormente. Por ejemplo, si configuramos el ancho de un elemento en 100px, entonces el ancho del cuadro de contenido será igual a 100 px. Luego el ancho del marco y la nota al pie se agregarán para formar las dimensiones finales del elemento.

El valor border-box le dice al navegador que tenga en cuenta el valor del ancho del marco y la nota al pie al especificar el ancho y el alto. Es decir, si establecemos el ancho de un elemento en 100 píxeles, este valor incluirá el ancho del marco y la nota al pie. Pero el cuadro de contenido se redimensiona de acuerdo con el valor del marco o nota al pie, y este valor facilita la determinación de las dimensiones de los elementos.

Ejemplo del Box Sizing

En el siguiente ejemplo, creamos <div> dos elementos con las mismas dimensiones ( width y height), la misma nota al pie ( padding) y el mismo marco ( border), pero el valor de propiedad box-sizing entre ellos es diferente, y la diferencia entre ellos será obvia:

< div  class = "Content-box" > contenido de la caja  </ div > < br > < div class = "border-box" > frontera cuadro </ div >

Código CSS:

div {
  width: 140px;
  height: 60px;
  padding: 20px;
  border: 8px solid salmon;
  background: #006099;
  color: white;
}

.content-box {
  box-sizing: content-box;
}

.border-box {
  box-sizing: border-box;
}

En el siguiente ejemplo, mostraremos tres casos, y en cada caso había un elemento <div> padre (con un marco naranja) que contiene un <div>elemento hijo, y el elemento hijo tiene la base width: 100%y tiene un fondo azul transparente.

  • En el primer ejemplo usamos el valor predeterminado content-box, el elemento hijo no tenía marco ni nota al pie, y apareció dentro del elemento padre sin problemas.
  • En el segundo ejemplo, usamos el valor predeterminado content-box, pero agregamos una nota al pie y un marco al elemento secundario. Notaremos cómo el elemento secundario salió del elemento principal porque el ancho dado es solo el ancho del cuadro de contenido, luego se le agregó el valor del ancho del marco y la nota al pie.
  • En el tercer ejemplo, usamos el valor border-box y el elemento hijo se expandió en el elemento padre sin problemas, porque el valor de ancho ( 100%) ahora incluye la nota al pie y el marco.
<div class="container">
  <div class="parent">
    <p> elemento principal del contenedor </p>
    <div class="child" style="box-sizing: content-box;">
      <p> elemento contenedor chico </p>
      <p class="css">
      box-sizing: content-box;<br/>
      width: 100%;<br/>
      padding: 0;<br/>
      border-width: 0;</p>
    </div>
  </div>
  
  <div class="parent">
    <p> elemento principal contenedor </p>
    <div class="child border-padding" style="box-sizing: content-box;">
      <p> elemento contenedor chico </p>
      <p class="css">
      box-sizing: content-box;<br/>
      width: 100%;<br/>
      padding: 5px;<br/>
      border-width: 10px;</p>
      </div>
  </div>
  
  <div class="parent">
    <p> elemento principal contenedor </p>
    <div class="child border-padding"  style="box-sizing: border-box;">
      <p> elemento contenedor chico </p>
      <p class="css">
      box-sizing: border-box;<br/>
      width: 100%;<br/>
      padding: 5px;<br/>
      border-width: 10px;</p>
      </div>
  </div>
</div>

Código CSS:

p {
  margin-left: 0.2em;
}
.container {
  display: flex;
}
.parent {
  width: 220px;
  border: solid 10px orange;
  margin: 0.8em;
}
.child {
  width: 100%;
  margin: 2em auto;
  background-color: rgba(229, 232, 252, 0.6);
}
.border-padding {
  padding: 5px;
  border: solid #5B6DCD 10px;
}
.css {
  font-family: monospace;
}

Soporte de navegadores

CaracterísticaChromeFirefoxInternet ExplorerÓperaSafari
Soporte básico 10.0 29,0 8.0 7.0 5.1

Algunos navegadores (como Chrome, Firefox y Safari) admitían esta función en sus versiones anteriores, pero con una versión anterior -webkit-o -moz-.

Esta característica tenía un valor adicional que es padding-box, pero se descuida y se omite en la mayoría de los navegadores modernos.

Estructura General del Box Sizing

La propiedad acepta box-sizing un valor que es una palabra reservada de las palabras que se enumeran a continuación.

content-box

Este es el valor predeterminado en la especificación CSS. Si las dos propiedades están configuradas width y height representarán las dimensiones del cuadro de contenido, sin ingresar el marco border, nota al pie padding o márgenes margin, es decir, si decimos que el ancho de un elemento es 350 píxeles, entonces establecemos el ancho del marco (en todos bordes) igual al valor de 10 píxeles, el ancho del elemento visible final será de 370 píxeles.

Conclusión: El ancho dado es solo el ancho del cuadro de contenido, y la altura dada es solo el alto del cuadro de contenido.

border-box

Si se toma este valor , significa que las dimensiones exactas en todas las propiedades width y height son las dimensiones finales del elemento, incluido el contenido y el marco del cuadro de nota al pie, pero sin ingresar márgenes.

Si decimos que el ancho de un elemento es 350px, y luego establecemos el ancho del marco (en todos los bordes) en 10px, el ancho del elemento final mostrado será 350px. Tenga en cuenta que las dimensiones del cuadro de contenido no pueden ser negativas, y los valores negativos se redondeará a 0, es decir, no se pueden utilizar border-box para hacer desaparecer el elemento.

En pocas palabras: el ancho dado es el ancho de todo el elemento, y la altura dada es la altura de todo el elemento. Incluye caja de contenido, ribete y marco.

Estructura formal

<strong>box-sizing: content-box  |  border-box</strong>