Modelo de caja en css (Box model)

Temario modelo de caja

1. ¿Que es el modelo de caja?
2. Propiedades width & height
3. Propiedad border
4. Propiedades Margin & Padding
5. Diferencia entre elementos de línea Vs elementos de bloque
6. Propiedad display (Visualización)
7. Propiedad visibility (Visibilidad)
8. Propiedad overflow
9. Tamaño de las cajas (Box-sizing)
10. Propiedades float & clear
11. Colapso de margenes verticales
12. Adición de márgenes horizontales
13. Centrado de Cajas

¿Que es el modelo de caja?

El modelo de caja es la forma como css ve las etiquetas HTML, se llama modelo de caja (o box model) porque para css cada uno de los elementos o etiquetas de HTML son un caja y pueden ser cajas de línea o cajas de bloque.

Cada caja tiene las siguientes propiedades, es decir esta compuesta interiormente por:

1. El contenido (Caja de contenido o content box): Que es el texto del elemento HTML, tomando en cuenta sus dimensiones (width & height).
2. El relleno (padding): Que es la distancia interna que hay del contenido (Content box) al borde (border).
3. El borde (border): Que es lo que delimita cada uno de los elementos HTML.
4. El margen (margin): Son las distancias externas que hay entre un elemento HTML y otro, o su contenedor, sean hermanos o padres.

Dentro del modelo de caja hay que considerar que una caja tendra 4 lados (que van en el sentido de las manesillas del reloj):

1. Arriba (top).
2. Derecha (right).
3. Abajo (bottom).
4. izquierda (Left).

Enlaces a documentacion e imagenes acerca del Modelo de caja (Box model):

• MDN (Motzilla Developed Network)
• 3con14LAB
• Devcode
• cssreference

Propiedades width & height

Las propiedades width & heigh nos van a permitir definir la anchura (width) y la altura (height) de los elementos HTML, ejemplo:

Propiedad border

El border (borde) es lo que va a delimitar a cada uno de los elementos HTML y tiene tres propiedades:

• border-color: Para dar color al borde.
• border width: Para el ancho o espesor del borde, y puede tener varios valores como:
• thin (delgado): 1px de grosor.
• medium: 3px de grosor.
• thick (grueso):5px de grosor.
• border-style: Que es el estilo de la línea y puede tener varios valores como:
  • solid: Línea solida
  • dashed: Línea discontinua
  • dotted: Línea punteada discontinua
  • double: Doble línea solida
  • Y muchas otras.

En el siguiente enclace se pueden ver todas la propiedades css: cssreference

Propiedades Margin & Padding

Diferencia entre elementos de línea Vs elementos de bloque

Elementos o cajas de línea:

• Ocupan el espacio necesario para mostrar su contenido.
• No tienen dimensiones modificables ancho y alto (width, height).
• Al ocupar solamente el espacio requerido van a permitir otros elementos a su lado.
• Padding y margin laterales solo empujan a los elementos que esten al lado (en horizontal), NUNCA APLICAR PADDING Y MARGIN EN VERTICAL (osea top o bottom) PORQUE NO FUNCIONARAN.

Elementos o cajas de bloque:

• Ocupan todo el ancho disponible, lo que genera saltos de línea.
• Se ubican una encima de otra.
• Tienen dimensiones modificables, por lo que se les puede aplicar ancho y alto (width &height).
• No permiten que otros elementos esten a su lado (aunque especifique un ancho (width)) los desplazan con un salto de línea, siguen ocupando todo el espacio disponible a lo ancho, generando saltos de línea tanto arriba como abajo.

Ejemplos:

Enlace a documentacion sobre elementos de línea y elementos de bloque: MDN (Motzilla Developed Network).

Propiedad display (Visualización)

La propiedad display es la propiedad que nos va a permitir mostrar nuestras cajas, es la propiedad que le dice al navegador como debe comportarse un elemento HTML a CSS, es decir como se va a visualizar en el navegador

La propiedad display tiene los siguientes valores:

• inline
• block
• inline-block: Se comporta como un elemento de línea y acepta modificar sus dimensiones (ancho y alto) como un elemento de bloque.
• none: Oculta el elemento, no lo visualiza pero OJO si lo carga.
• table: Para tablas.
• list-item: Para elementos de lista ul y ol
• flex: Ver curso de flexbox.
• grid: Ver curso de grid css.

Ejemplos:

• item 1
• item 2
• item 3
• item 4

1. item 1
2. item 2
3. item 3
4. item 4

Propiedad visibility (Visivilidad)

Oculta el elemento pero conserva el espacio que este ocupa, es como poner en opacidad cero al elemento, y tiene dos valores:

• visible: Que muestra el elemento.
• hidden: Oculta el elemento, pero conserva el espacio que este ocupa.

Ejemplos:

Propiedad overflow

Esta propiedad nos permite decir que va a pasar con el contenido que desborde su caja contenedora, la utilizamos cuando no sepamos si el contenido que va a tener una caja la desborda, esto para evitar que el texto no se vea o se monte sobre otro elemento..

Enlace a documentacion sobre la propiedad overflow: Cssreference

Ejemplos:

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam ea, esse unde magnam incidunt cumque iure, error tempore perspiciatis facere fugit, nobis atque pariatur a. Eveniet veritatis et autem? Exercitationem.

Tamaño de las cajas (Box-sizing)

La propiedad box-sizing eefine cómo se calculan el ancho y el alto de un elemento (si incluyen el relleno y los bordes o no), nos va a decir desde donde va a empezar a considerar el tamaño de la caja.

A traves de esta propiedad se le dice al navegador como tiene que calcular el tamaño interno de la caja y tiene dos valores: content-box (que es el valor por defecto de la caja) y border-box y se aplican así:

• box-sizing: content-box;

  El ancho y la altura del elemento solo se aplican al contenido del elemento. Por ejemplo, este elemento tiene

  • border-width: 12px
  • padding: 30px
  • width: 200px

  El ancho completo es 24px + 60px + 200px = 284px.

  El contenido tiene el ancho definido. La caja se acomoda para esas dimensiones.

• box-sizing: border-box;

  El ancho y la altura del elemento se aplican a todas las partes del elemento: el contenido , el relleno y los bordes. Por ejemplo, este elemento tiene

  • border-width: 12px
  • padding: 30px
  • width: 200px

  El ancho completo es de 200px , pase lo que pase.

  La caja tiene el ancho definido. El contenido se adapta a esas dimensiones y termina siendo 200px - 60px - 24px = 116px .

Enlace a documentacion:
• Sobre la propiedad box-sizing: cssreference.
• Articulo de Paul Irish sobre la poropiedad box-sizing y el tamaño de caja.

Ejemplos

Propiedades float & clear

La propiedad float nos va a permitir flotar hacia la izquierda o hacia la derecha elementos.

Cuando flotamos un elemento sale de la dicposición natural del elemento HTML

Nota:Al dia de hoy se considera una mala practica trabajar con esta propiedad ya que como los elementos flotan, se genera un problema de superposicion con los siguientes elementos que siguen y que no flotan.

Enlace a 960 grid system que es una biblioteca de CSS enfocada a la maquetación de una página web que utilizaba la propiedad float pero que hoy en dia ya es obsoleta y no se usa, fue reemplazada por frameworks como Bootstrap.
Enlace documentacion propiedades float y clear en el sitio web cssreference.io

Ejemplos

Colapso de margenes verticales

El colapso de margenes se da unicamente en top y bottom no en los horizontales (right y left).

La solución a este problema de las margenes verticales es utilizar solo una propiedad para todos los elementos HTML, o margin top o margin bottom pero nunca utilizar al mismo tiempo ambas propiedades (margin top, margin bottom) porque se va apresentar superposicion de margenes en los elementos.

Ejemplos:

Adición de márgenes horizontales

En los margenes horizontales no sucede el colapso como en los margenes verticales

Ejemplos:

Centrado de Cajas

La manera de centrar una caja o elemento HTML (no su contenido) es darle un valor "auto" al margin-left y al margin-right.

El valor "auto" significa, ajustalo automaticamente, por ejemplo:

.sitio-web{
margin-left: auto;
margin-right: auto;
}

Ejemplos: