El lenguaje CSS trata a todos los elementos como si estuvieran contenidos en cajas rectangulares. Es lo que se llama el modelo de cajas. Cada una de estas cajas puede tener un borde que lo delimita, un margen interno y un margen externo. Podemos también definir otra serie de propiedades como su altura, su anchura, forma de verse, colores de fondo, etc.
En este tema veremos los márgenes y bordes que pueden tener estas cajas, dejando para temas posteriores otra serie de propiedades.
Si normalmente al ver una página Web no vemos una caja en cada párrafo o en cada imagen, es porque la mayoría de las veces los valores de los márgenes y del borde son cero o transparentes, (valores por defecto) pero a cualquier elemento definido mediante una etiqueta HTML se le podrían aplicar los bordes y márgenes que vamos a explicar a continuación.
Margen, borde y relleno.
de dentro a afuera, la estructura de una caja sería la siguiente:
- Contenido: Es el texto, la imagen, o el elemento al que hace referencia la etiqueta HTML
- Relleno (padding): Es un margen alrededor del contenido que forma parte de la propia caja.
- Borde (border): Es el borde externo de la caja, y la delimita.
- Margen (margin): Es un margen exterior a la caja, que aunque no forma parte de la caja, deja un espacio entre ésta y los otros elementos que la rodean.
Las propiedades padding, border, margin indican respectivamente
el relleno, el borde, y el margen externo. Cada una de ellas puede referirse a
los cuatro lados de la caja mediante las palabras top (superior),
bottom (inferior), left (izquierda), y
right (derecha),
Veámoslo en el siguiente esquema:
El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno (padding) se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen (margin) se muestra el color o imagen de fondo de su elemento padre (el elemento que lo contiene).
Al igual que las etiquetas que las definen, las cajas pueden estar anidadas, una dentro de otra, lo cual puede crear un sistema bastante complejo para la estructura de la página.
En CSS el relleno, el borde y el margen externo se delimitan mediante propiedades que iremos viendo en las siguientes páginas de este manual.
Otras aplicaciones del modelo de cajas.
El modelo de cajas sirve también para otras aplicaciones que veremos más adelante, tales como estructurar la página en varios apartados o columnas; poner fondos distintos a distintos elementos, tratar de distinta manera los textos en las distintas columnas, ocultar o resaltar algunas cajas. Todo eso lo iremos viendo en temas posteriores.
Fuentes: https://aprende-web.net/css/css2_3.php