Sobre el modelo de caja
El modelo de caja es un concepto de CSS que nos explica parte de la naturaleza de los elementos HTML.
Nos dice que todos los elementos son rectángulos (o cajas) que podemos distribuir de diferentes maneras:
- Unas encima de otras
- Unas al lado de otras
- Unas dentro de otras
Donde cada caja cuenta con las siguientes 4 propiedades:
- content (contenido)1
- padding (espaciado)
- border (borde)
- margin (margen)
Content
El contenido es lo que va entre la etiqueta de apertura y la etiqueta de cierre.
La mayoría de las veces se trata de texto…
<p>Aquí hay texto</p>…aunque en otras ocasiones se trata de más etiquetas, o una combinación ambos.
<p>Aquí hay <strong>más</strong> texto</p>Padding
El padding o espaciado, es el espacio que se encuentra entre el contenido y el borde. Para entender mejor esto, primero agreguemos CSS que nos ayude a visualizar el borde…
<p style="border:1px solid black">Aquí hay texto</p>… ahora agreguemos el padding…
<p style="padding:20px;border:1px solid black">Aquí hay texto</p>De esta manera es más evidente ver qué tipo de espacio estamos insertando.
Border
Es lo que envuelve al contenido y al espaciado, también lo podemos estilizar de diferentes maneras.
<p style="border:4px dashed black">Aquí hay texto</p>Margin
El margen es el espacio entre un elemento y los elementos que están a su alrededor.
<p style="margin:20px;border:1px solid black">Aquí hay texto</p><p style="border:1px solid black">Aquí hay texto</p>