Box model

Cada elemento html, más allá de su personalización mediante el lenguaje CSS, se encierra en una "box" que contiene el contenido (de cualquier naturaleza, desde un texto hasta una imagen) y, progresivamente, avanzando hacia el exterior, una serie de componentes: el padding, el borde y el margen.

Con CSS podemos pasar a actuar cambiando las propiedades de estos componentes.

El padding es el espacio entre el contenido y el borde.

El borde es literalmente el borde de nuestra box. Podemos personalizarlo ampliamente, ya que tiene varias propiedades CSS que analizaremos un poco más adelante en nuestro artículo.

Finalmente, el margen es el espacio fuera del borde.
Su función es separar el elemento de otros elementos (por ejemplo, separa un <div> de otro).

Es importante subrayar que dos márgenes no se sumarán, sino que se superpondrán:

si tuviéramos, por ejemplo, dos <div>, cada uno de ellos tendría su propio modelo de caja; si los separamos usando un margen de 20 px cada uno, no tendríamos un espacio de separación total de 40 px, sino de 20 px.

Además, si por ejemplo diéramos un fondo al elemento html en cuestión, este fondo se aplicaría al espacio de relleno y borde, pero dejaría libre el del margen, que -repetimos- sólo sirve para separar el elementos de la pagina html.

Los 3 componentes del modelo de caja aceptan un valor en píxeles (o en otra de las unidades de medida que hemos visto) para establecerse en 4 propiedades: top, right, bottom y left.

En el siguiente ejemplo, en el que definiremos el margen de un elemento, puedes observar su sintaxis, que se puede expresar de dos formas:

modo 1

.elemento1 {
   margin: 10px 30px 25px 20px;
}

Modo 2

.elemento1 {
   margin-top: 10px;
   margin-right: 30px;
   margin-bottom: 25px;
   margin-left: 20px;
}

¡Atención! Existen dos propiedades CSS, como width y height, que sirven, respectivamente, para definir el ancho y el alto de nuestro documento html.

Podrías caer fácilmente en el error de pensar que al establecer el valor de estas dos propiedades, en realidad va a cambiar el tamaño global del modelo de caja: ¡bueno, est no es el caso!

Cuando asignamos un width y una height a un elemento, lo que se redimensionará es el CONTENIDO: a esa dimensión se sumará el valor del resto de componentes de la box-model.

Sin embargo, este comportamiento predeterminado se puede cambiar con la ayuda de la propidad box-sizing.

Esta propiedad acepta dos tipos de valores:

• content-box: el valor por defecto del navegador (que, como hemos visto, si un elemento tiene ancho propio, hace que al ancho se le sume el valor del resto de componentes);
  ejemplo:

.elemento1 {
   box-sizing: content-box;
   width: 150px;
   padding: 50px;
   border: solid 10px red;
}

En este caso el elemento en total ocupará 150px + 100px (padding left y padding right) + 20px (border left y border right), para un total de 270px.

¡Recuerda! Tampoco puedes especificar la propiedad de tamaño de cuadro si su valor es cuadro de contenido, porque es un valor predeterminado.

• border-box: el valor personalizado que garantizará que, al delimitar el ancho de un elemento, este incluya el tamaño del resto de los componentes. Ejemplo:

.elemento1 {
   box-sizing: border-box;
   width: 150px;
   padding: 50px;
   border: solid 10px red;
}

En este segundo caso, el total seguirá siendo de 150px. Los componentes del box model (¡¡excepto el margen!!) ocuparán parte del espacio reservado para el contenido, aplastándolo.

Aquí destacamos otra gran diferencia entre margen y el padding: con esta configuración, de hecho, a medida que aumenta el espacio dedicado al relleno, el espacio dedicado al contenido disminuirá. Por lo tanto, el relleno "aplastará" el contenido. El borde seguirá el ejemplo del padding.

Por otro lado, al aumentar el tamaño del margen, esto no aplastará el contenido, pero igualmente agregará un espacio divisorio entre los elementos, preservando las dimensiones del contenido en sí.

¡Atención! Si usas un framework para escribir tu código, el valor predeterminado de la propiedad de la box-sizing probablemente se convertirá en border-boz.

Las propiedades del border 

Como hemos mencionado, el borde en particular tiene varias propiedades; vamos a verlos:

• border-style: define el estilo del borde. Puede ser dashed (punteado), dotted (en puntos), o solid (normal); puedes aplicarlo a todos los lados o solo a uno, ajustando la sintaxis de la propiedad según sea necesario (por ejemplo: border-top-style)
• border-width: delinear el tamaño del borde; puede aceptar un solo valor para todos los lados o varios valores por lado; también puede cambiar solo un lado a través de ligeros cambios en el nombre de la propiedad, como border-width-top, o bottom.
• border-color: nomen presagio, se refiere a cambiar el color del borde. Aquí también puedes cambiar el color de cada lado de la misma manera que arriba.
• border-radius: sirve para redondear las esquinas de nuestro borde. Puede aceptar valores de píxeles o porcentajes. Dependiendo de estos valores, nuestra box también puede convertirse en un círculo, una elipse o tener un efecto de píldora. Para dominar mejor los resultados de esta configuración, puedes encontrar generadores de radio de borde en línea. También para esta propiedad de borde tendrás la posibilidad de modificar todos los lados o solo algunos.

Puedes definir todas estas características del borde, con la excepción del border-radius, también utilizando la propiedad genérica "border", como en el ejemplo a continuación:

.elemento1 {
   border: solid 10px red;
}