Sobre el modelo de caja
Tiempo de lectura:
Publicado:
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>