Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Modelo de Caja CSS

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 ;)

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal