21-Modelos de cajas en css

Excepto el contenido, en css case todos los elementos html son modelos de cajas

Lo primero es el contenido, cuando le ponemos bordes, ya hacemos que el contenido se quede dentro de una caja

le ponemos un padding (relleno), entonces envolvemos el contenido con otra caja

los margenes, cuando los defenimos, estamos tambien envolvendo el contenido en otra caja

para que se entienda mejor vea la seguiente figura

ejemplo

Soy el Margin

Soy el borde

Soy el padding

Soy el contenido

---

...

Explicación de las diferentes partes:

• Contenido : el contenido del cuadro, donde aparecen el texto y las imágenes.
• Relleno : borra un área alrededor del contenido. El relleno es transparente.
• Borde : un borde que rodea el relleno y el contenido.
• Margen : borra un área fuera del borde. el margen es transparente

codigo

 div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
 

---

Ir al indice

---