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)¹
• 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>

Comentarios

Rutas relacionadas

Web Dev (Frontend)