En esta sección, aprenderás a diseñar tus páginas web utilizando el posicionamiento CSS. Antes de hacerlo, sin embargo, ayuda aprender sobre algo llamado la Caja de CSS Modelo.

El modelo de caja de CSS

Una página HTML se considera como una serie de cajas apiladas una encima de la otra. Estas cajas pueden contener texto en párrafos, imágenes, objetos de forma, etc. Cada caja se divide en cuatro áreas: un margen, un borde, algo de relleno, y finalmente el contenido mismo:

Posicionamiento CSS - el modelo de caja

El margen es transparente y va alrededor de la frontera. No se puede establecer un color para los márgenes. Puede ser grande, como en la imagen arriba, o ponerlo a cero y acurrucarse justo en la frontera.

El borde va alrededor del acolchado y el contenido. Puede tomar un color, un tamaño y un tipo de borde (punteado, sólido, etc).

El relleno es el espacio entre el contenido y la frontera. Tiene el mismo color que el fondo de toda la caja.

El contenido son cosas como el texto y las imágenes - toda la punta de la caja.

Las cuatro áreas pueden tener sus tamaños establecidos. En el código de abajo, hemos establecido dos párrafos de texto:

Posicionamiento CSS - el modelo de caja

Todo lo que estamos haciendo es establecer una altura y anchura para dos párrafos de texto. Estamos y luego establecer el margen, el borde y el acolchado. (También hemos añadido un color para que puedas ver cómo se ve en el navegador). Aquí está el resultado:

Posicionamiento CSS - el modelo de caja

Fíjense en el tamaño de los márgenes que rodean la frontera. El primer margen es 30 píxeles en los cuatro lados. Puedes establecer lados individuales, si quieres:

margen izquierdo: 10px;
margen-derecha: 20px;
margen superior: 30px;
...en el fondo del margen: 40px;

Sin embargo, con sólo usar el margen, estás estableciendo el margen para los cuatro lados. Lo mismo es cierto para el borde y el relleno: puedes establecer los cuatro a la vez, o sólo establecer valores individuales añadiendo arriba, derecha, abajo o izquierda.

Para obtener el tamaño total de la caja, se suman las cuatro partes: margen, borde, relleno, contenido. Por ejemplo, en el código anterior tenemos un ancho de 300 píxeles para el primer párrafo (la anchura se refiere al área de contenido). El margen es 30 píxeles en cada lado, lo que da un margen total de 60 píxeles. El borde es 1 píxel a la izquierda y 1 píxel a la derecha. El relleno es de 20 píxeles en a la izquierda y 20 píxeles a la derecha. Por lo tanto, el ancho total de toda la caja es:

Margen izquierdo 30
Margen derecho 30
Borde izquierdo 1
Borde derecho 1
Acolchado izquierdo 20
Acolchado derecho 20
Anchura de contenido 300

Ancho total de la caja = 402 píxeles

Así que aunque especificamos un valor de ancho de 300 píxeles, el ancho de la caja alrededor de todo el párrafo era en realidad de 402 píxeles. Tienes que llevar esto en mente cuando se establecen valores como este, especialmente cuando se flotan elementos de la izquierda y correcto. Por ejemplo, si tienes un área de navegación flotando a la izquierda entonces es una buena idea para establecer el valor de la anchura, y todos los demás valores: sólo recuerda para sumar todos los diferentes tamaños al calcular el tamaño total.

En la próxima lección, aprenderás a añadir comentarios a tu código CSS.

|| listas HTML || comentarios CSS