Box Model
Todo en CSS tiene una caja alrededor, y comprender estas cajas es clave para poder crear diseรฑos con CSS o para alinear elementos con otros elementos. En este artรญculo, echaremos un vistazo mรกs de cerca al modelo de cajas en CSS con el que vas a poder crear diseรฑos de compaginaciรณn mรกs complejos con una comprensiรณn de cรณmo funciona y la terminologรญa relacionada.
Este modelo consta de 4 elementos, el content
, el padding
, el border
y el margin
. y en le caso de que quieras visualizar cualquiera de estos elemntos de cualqueir pagina web, puedes hacerlo haciendo click derecho y luego selccionando inpeccionar elemento
.
Content
El รกrea del content (como su nombre lo dice) contiene el โcontenidoโ central a mostrar, es decir, un texto, una imagen, un video, etc. El contenido siempre es lo que queremos mostrarle al usuario. Esta รกrea en muchas ocasiones tiene un color o imagen de fondo para hacerla mรกs atractiva.
Como podemos observar en la imagen, el contenido es el รกrea central de todo el elemento, de tal forma, que el siguiente elemento que lo rodea es el padding. El tamaรฑo de esta รกrea se puede modificar con las propiedades height
, width
, max-height
, max-width
, min-height
, min-width
.
Estos estilos, solo se pueden aplicar a los elementos de bloque. Los elementos en linea no tienen medidas, su tamaรฑo lo determina el contenido
Margin
Es la separaciรณn entre una caja y las cajas adyacentes.
El margen es la รบltima รกrea del Box Model y se puede ver como una separaciรณn invisible o transparente que ayuda a separar un elemento de otro. Cuando definimos un color o imagen de fondo, este no se propaga a esta secciรณn.
Los mรกrgenes siempre quedan fuera del modelo de caja, por lo que pueden utilizarse para crear espacio entre los elementos.
Los valores pueden ser positivos o negativos.
Un habito bastante comun es colocar al estilo global margin: 0;
y padding: 0;
, sin embargo es una mala practica, ya que queda todo bastante ilegible, puesto que te quedaria sin espacio entre los paragrafos y elementos de la pagina.
Otra mala practica que no es tan comun es utilizar margin: 0 auto;
para centra un elemento en la pagina, ya que por la cascada sobrescribira los margenes ya establecidos anteriormente, o cambia margenes que no es necesario cambiar. Por ello para centra un elemento lo recomendable es lo siguiente:
lo que si es recomendable es establecerle un margin: 0;
al body, puesto que por defecto los navegadores establecen un margen de 8 pixeles al body.
Padding
Es el รกrea alrededor del contenido. El padding
es transparente.
El padding es una separaciรณn o espacio interior que existe entre el contenido y el borde de la caja, el cual se utiliza para dar una apariencia estรฉtica mรกs atractiva y que el contenido no este pegado al borde.
Cabe mencionar que el padding sigue siendo parte de la caja visible, por lo que, si tenemos una imagen o color de fondo, este se extenderรก a travรฉs del padding.
Basicamente sirve para establecer una distancia entre el borde del bloque y el contenido de su interior. Es decir si establecemos un padding-top: 50px;
a una caja azul con texto en su interior el texto se situara 50px por debajo del margen superior de la caja, pero esos 50px seguiran siendo azule, al contrario que con margin.
Border
El borde es la lรญnea que rodea la caja, es como la frontera que rodea al elemento, esta se utiliza para darle una apariencia estรฉtica a la caja, pues nos permite dibujar una lรญnea de algรบn color, la lรญnea puede tener los siguientes estilos:
Las tres propiedades bรกsicas para crear bordes son:
border-style
: sus valores son: [ none | hidden | solid | dotted | dashed | double | groove | ridge | inset | outset ]border-width
: indica al navegador el tamaรฑo del borde, normalmente, se utiliza el valor en pรญxeles para esta propiedad, por ejemplo,border-width: 5px
.border-color
: por defecto, el valor utiliza el currentColor del texto. Sin embargo, preferimos definirlo aunque no sea necesario. Por ejemplo,border-color: red
.
La mayorรญa de los desarrolladores web no utilizan estas tres propiedades por separado. En su lugar, existe el shorthand: border
. Con este shorthand podemos escribir sรณlo border: solid 5px red
.
Tambiรฉn podemos controlar y dar un estilo diferente a cada parte de los bordes, por ejemplo:
Border-radius
La propiedad CSS border-radius
redondea las esquinas del borde exterior de un elemento. Puedes establecer un solo radio para hacer esquinas circulares, o dos radios para hacer esquinas elรญpticas.
Si recibe un solo valor impirmira una esfer y si recibe dos, imprimira una elipse
Outline
La propiedad CSS outline
es una forma reducida para establecer una o mรกs de las propiedades individuales de contorno outline-style
, outline-width
y outline-color
en una sola declaraciรณn. En la mayorรญa de los casos el uso de este atajo es preferible y mรกs conveniente.
Basicamente outline
crea un borde por el exterior del contenedor, es decir que el borde que establece esta fuera de Box model
.
Nota: al no ser parte del box model, si creas un borde muy grande, este se superpondra a los elementos que tenga a su alrededor.
Otra propiedad que ofrece outline
es outline-offset
. Esta propiedad establece a que distancia se situara el borde de la caja. En el caso de que sea negativo se meterรก dentro de la caja.
Marging vs Padding
Aunque estas dos propiedades son similares, a veces se utilizan errรณneamente de forma intercambiable, aunque son muy diferentes. Entender sus diferencias puede ser beneficioso para los desarrolladores web.
El padding y el margin son dos elementos importantes en el diseรฑo web que aรฑaden espacio extra en diferentes lugares. Pero, ยฟDรณnde y cuรกndo se debe utilizar uno en vez del otro?
Para el padding, puedes utilizarlo en las siguientes situaciones:
Cuando no quieras que el contenido toque los bordes del contenedor.
Cuando quiera aumentar el tamaรฑo de un bloque de contenido sin que el propio contenido sea mรกs grande.
Cuando se necesita espacio entre un elemento interior y la caja padre.
Cuando quieras que el background del elemento se muestre en el espacio generado. por ejemplo, si tienes dos divs, quieres que ambos divs (con diferente color de fondo) esten juntos, pero no quieres que sus textos se toquen.
Cuando quieras aumentar el tamaรฑo del elemento. Ejemplo: si quieres aumentar el tamaรฑo de un botรณn.
Para el margin, puedes utilizarlo en las siguientes situaciones:
Cuando necesite espacio alrededor de los elementos, como separar una imagen y la descripcion de la misma.
Utilizarรญas el margen para establecer la distancia entre elementos cercanos.
Cuando quiera centrar un elemento horizontalmente.
Cuando quieras mover un elemento hacia arriba, hacia abajo o de lado a lado.
Cuando quieras sobreponer elementos.
En resumen, si tu objetivos es separar tu caja de los elementos que le rodean tienes utilizar margin y si tu objetivos es aumentar el tamaรฑo de la caja y separar los bordes del contenido tienes que utilizar padding
Nota: El margen sirve para aumentar la distancia entre hermanos. No esta pensado para aumentar la distancia entre un elemento hijo y su contenedor padre, para eso esta elpadding
.
Box sizing
La propiedad de CSS box-sizing
indica cรณmo se deben calcular las medidas de un elemento. Esto, que parece trivial, no lo es tanto ya que por defecto CSS considera que el ancho y alto de la caja es de las propiedades width
y height
. ยฟQuรฉ significa esto? Pues que si le aรฑades un padding
o un border
el tamaรฑo de renderizado de la caja serรก: width + padding + border.
En el siguiente ejemplo tendrรญamos una caja de 290px de ancho ya que: 250px de width + (10px * 2) de padding + (10px * 2) de border
Aunque no la veamos ahรญ, la propiedad box-sizing
es la que se encarga de decir cรณmo debe ser ese cรกlculo. En este caso estรก utilizando el valor content-box
, ya que es su valor por defecto.
border-box
El valor border-box
en el box-sizing
hace que el padding
y el border
pasen a formar parte del cรกlculo del ancho de la caja y no lo suman posteriormente.
En el siguiente ejemplo tendrรญamos una caja de 250px de ancho ya el padding
y el border
ya forman parte del cรกlculo del width
del elemento:
En este caso lo que hara box-sizing sera cambiar el with del contenedor para que asi el width del contenedor siga siendo 250px
Bibliografia
Last updated