Propiedad CSS box-sizing

Si eres de esos que tienen la suerte de contar entre las filas de su equipo con un front-end developer, de verdad, cuídalo, mímalo e invítalo a desayunar de vez en cuando. Quizás hoy no le veas el sentido, pero cuando te toque maquetar páginas web (compaginándolo, claro está, con tu trabajo de back-end developer), te acordarás de él y tu inversión en tiempo y adulación te parecerá plenamente amortizada.

Lógicamente yo soy uno de esos afortunados que tienen un front-end developer como compañero (si tu lo eres, que sepas que te profeso odio eterno e incondicional hasta el infinito), con lo cual toca arremangarse y maquetar como bien se pueda.

En esta encrucijada que es para mí el diseño, me ha dado por escribir varios plugins de jQuery para encapsular distintos componentes de UI e intentar pensar que así estoy más cerca del desarrollo y menos del diseño… esto se llama tristemente, auto-ayuda.

De largo, lo que más guerra me ha dado es trabajar con las dimensiones de los elementos, me refiero al alto y al ancho. Siendo así, en este pequeño post sólo pretendo mostrar como se comporta la propiedad CSS box-sizing y como afecta al ancho y alto de un elemento (tengo claro que si no escribo esto, tarde o temprano se irá al limbo del conocimiento y me tocará volver a hacer de nuevo todas las pruebas para recordar como se comportaba).

boz-sizing es una propiedad de CSS 3 que permite cambiar la forma en que se calcula el ancho y alto de un elemento. Aunque según MDN tiene tres posibles valores, yo me voy a centrar solamente en dos de ellos: border-box y content-box. Haré esto porque border-box es usado por Bootstrap y content-box por el contrario es el valor predeterminado de la propiedad.

La diferencia radica principalmente en si se incluye o no el padding y el border a la hora de cálcular el ancho y el alto.

• border-box
  • SÍ incluye padding y border para calcular ancho y alto
• content-box
  • NO incluye padding y border para calcular ancho y alto

Para verlo claro, nada mejor que un ejemplo con un simple div y el siguiente estilo (que por cierto y en un alarde de originalidad, simula la bandera de España ahora que estamos en pleno mundial):

#Div1 {

    background-color: yellow;

    width: 300px;

    height: 300px;

    padding: 5px;

    margin: 10px;

    border: solid red 20px;

}

Para enfrentar las dos propiedades, además veremos que resultados arrojan los métodos de jQuery .width(), .height(), .innerWidth(), .innerHeight(), outerWidth(), outerHeight(), .css(“width”) y .css(“height”)

border-box	content-box

El estudio de los resultados arroja las siguientes conclusiones (parezco alguien diciendo esto y en realidad son 4 tristes datos, pero bueno…):

• Si quieres saber el ancho y alto del contenido utiliza .width() y .height()
• Si quieres saber el ancho y alto del elemento utiliza .css(“width”) y .css(“height”)
• Si quieres dimensionar un elemento a un acho o alto fijo y pasar de preguntarte si el padding o el border lo harán más ancho o más alto, utiliza border-box.

Un saludo!