Modelo de Caja CSS

Hola gente de EDteam...

...soy su amigo y docente digital Jonathan MirCha, y en esta ocasión quiero hablarles del Modelo de Caja en CSS.

El modelo de caja o "box model" es una de las característica más importante de CSS, ya que condiciona el diseño de la web; hace que todos los elementos de un documento HTML se representen mediante cajas rectangulares.

CSS controla el aspecto de todas las cajas (contenedores), permite definir la altura y anchura de cada caja, el margen existente entre cajas y el espacio de relleno interior que muestra cada una; además controla la forma en la que se visualizan pero la mayoría no muestran ningún color de fondo ni borde, no son visibles a simple vista.

Partes del modelo de caja:

  1. Contenidocontent
  2. Rellenopadding
  3. Bordeborder
  4. Margenmargin
box model
  • Border: Borde, es la linea que delimita los elementos divide el margin del padding.
  • Padding: Relleno, distancia interna que hay entre los márgenes del elemento(top, right, bottom, left) y su contenido.
  • Margin: Margen, distancia externa que hay entre los elementos y los márgenes del documento u otros elementos (top, right, bottom, left).

Ejemplos de border:

border-width: thin | thick | medium | 10px | 1em;
border-style: solid | dashed | dotted;
border-color: #F60 | orange;
border: thin solid #F60; (shorthand)

Ejemplos de margin y padding:

  • 4 márgenes / bordes
  • top / bottom = verticales
  • left / right = horizontales
  • 1 valor = Se aplica a los 4 lados
    margin: 1em;
    padding: 1em;
  • 2 valores:
    • 1° es para top y bottom
    • 2° es para left y right
    margin: 1em 2em;
    padding: 0 1em;
  • 3 valores:
    • 1° es para top
    • 2° es para left y right
    • 3° es para bottom
    margin: 1em auto 2em;
    padding: 2em 0 .5em;
  • 4 valores: En sentido de las manecillas del reloj:
    • 1° es para top
    • 2° es para right
    • 3° es para bottom
    • 4° es para left
    margin: 1em 3em 2em 0;
    padding: 2em 1em 0 .5em;
  • Especificando cada lado
    margin-top | margin-right | margin-bottom | margin-left
    padding-top | padding-right | padding-bottom | padding-left

Nota: Los atributos del modelo de caja (bordermargin y padding) por defecto aumentarán el ancho (width) y alto (height) de la misma, es decir, crecen el tamaño de la caja (box-sizing), por lo que te sugiero siempre aplicarle un tamaño de caja con el valor border-box a la etiqueta html y luego heredarle el valor a todos los elementos como nos lo recomienda el gurú Paul Irish.

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

Recuerda que si quieres saber más de CSS, en EDteam tenemos los siguientes cursos para ti:

Se despide su amigo y docente digital Jonathan MirCha, sean felices, hasta siempre, nos leemos la próxima semana... 

...bye ;)

Sigue leyendo