Modelo de Caja CSS

Todos las etiquetas HTML pueden considerarse como cuadros o cajas. En CSS, el termino "modelo de caja" es usado cuando se habla de diseño y boceto. Este modelo de caja es en esencia una caja que envuelve la etiqueta HTML. Esto consiste en: márgen, borde, relleno y el contenido:

La siguienter figura muestra el modelo de cuadro:

Explicación de las diferntes partes:

• content: Es el contenido de la caja, en donde el texto e imágenes aparece.
• padding: Es un relleno alrededor del contenido. Este relleno es transparente.
• border: Es un borde alrededor del relleno y del contenido.
• margin: Es el magen alrededor del borde. El margen es transparente.

El modelo de caja permite agregar un borde alrededor de la etiqueta y definir espacios a las etiquetas.

div {
  width: 300px;
  border: 25px solid green;
  padding: 25px;
  margin: 25px;
}

Ancho y Altura de un elemento

Para especificar la anchura y altura de un elemento correctamente en todos los Navegadores Web, es necesario saber como funciona el modelo de caja.

Importante: Cuando se establecen las propiedades de ancho y alto de un elemento con CSS, solo establece en ancho y alto del área de contenido. Para calcular el tamaño completo de un elemento, se debe considerar el relleno, borde y margen.

Supongamos que queremos establecer un elemento <div> con un ancho total de 350px:

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

Aquí el calculo:

320px (width)
+ 20px (padding derecho e izquierdo)
+ 10px (border derecho e izquierdo)
+ 0px (margin derecho e izquierdo)
= 350px

El ancho total de un elemento debe ser calculado de la siguiente manera:

Ancho Total = Ancho + Relleno Derecho + Relleno Izquierdo + Borde Derecho + Borde Izquierdo + Margen Derecho + Margen Izquierdo

El Alto total de un elemento debe ser calculado de la siguiente manera:

Alto Total = Alto + Relleno Superior + Relleno Inferior + Borde Superior + Borde Inferior + Margen Superior + Margen Inferior