Todas las páginas web constan de elementos representados uno tras otro. El modelo de caja CSS determina cuánto espacio puede ocupar un elemento en una página web, lo que nos permite personalizar el esquema de diseño predeterminado.
Según este modelo, cada elemento HTML se coloca en una "caja". La caja en sí es similar a una muñeca rusa: en realidad son 4 cajas colocadas dentro de la otra, comenzando desde la más interna:
Juntos, esto es todo lo que un navegador necesita para representar el cuadro de un elemento.
Básicamente, el modelo de caja CSS es un conjunto de reglas que definen cómo se representa cada página web en Internet. Puede establecer el tamaño de cada cuadro por separado con las propiedades asociadas.
Para establecer el tamaño del área de contenido , usamos las propiedades width ****and heighty relacionadas.
Para padding, border y margin , usamos propiedades con el mismo nombre — padding, bordery margin ****— así como propiedades específicas para cada lado del elemento.
Si no especificamos ninguna de estas propiedades, los navegadores utilizarán sus valores predeterminados para elementos específicos, por ejemplo:
body {
margin: 8px;
}
El contenido del elemento es la información que está compartiendo con los usuarios, ya sea texto, imágenes, videos, etc. El tamaño del área de contenido está definido por 2 propiedades: ancho y alto. De forma predeterminada, al establecer el widthy heightdel elemento, solo afecta el tamaño del área de contenido y no el relleno, los bordes y los márgenes.