Lo vamos a neCSSitar
Aprenderemos desde los conceptos básicos de CSS hasta los conceptos más avanzados
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:
Donde cada caja cuenta con las siguientes 4 propiedades:
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>
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.
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>
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>