¿Ya sabes cómo hicimos algo que
se ve como un cuadro o caja, en nuestra pasada guía paso a paso,
usando y luego
poniendo un color de fondo?
Bueno, en realidad, cada elemento en tu
página web es considerada una caja por el navegador,
sea que a ti te parezca o no que se ve como una caja.
Este encabezado es una caja,
este párrafo es un caja, incluso este
que pusimos aquí es una caja. Algunas de las cajas
son grandes, algunas son pequeñas, algunas son una línea
como este , algunas son bloques, como .
Pero todas son consideradas cajas.
¿Por qué es importante? Porque hay algo
llamado "Modelo de caja", el cual puedes
ver en el diagrama que acabo de pegar.
Cada caja tiene cuarto partes:
el contenido real, el relleno,
el borde y el margen. Podemos usar CSS
para modificar el relleno, el borde y el margen.
Así que pronto entenderás qué es
todo esto en realidad. Empecemos con el margen.
Es el área transparente al rededor de la caja
que separa la caja de otros elementos.
Especificaremos el margen usando nuestra
unidad favorita: pixeles. Para agregar 15 pixeles
al margen en cada lado de la caja de
Información Oficial, sólo escribimos: "margin: 15px;".
¿Vieron el cambio?
¿Qué pasa si queremos una cantidad diferente
de margen en cada uno de los lados? ¿Algo más grande
arriba y abajo que en los lados? Podemos
escribir esas cantidades en el orden de las manecillas de reloj,
empezando por la parte de arriba. Entonces arriba 15px, derecha 0px,
abajo 10px, izquierda 6px.
O podemos usar propiedades específicas para cada lado,
pero sólo queremos especificar pocos lados.
Sólo queremos poner espacio alrededor de la fotografía del gato,
del lado derecho, y luego,
también ponemos algo de espacio en la parte de abajo...
y está bien si dejamos el margen por defecto en los
lados restantes. También hay un valor
especial para el margen que nos va a ayudar a hacer
cosas extraordinarias en nuestras páginas. Para mostrar eso,
voy a poner un "" alrededor de toda la página.
y le voy a asignar el ID "container."
Voy a poner esta etiqueta aquí abajo para que contenga todo.
Ahora, voy a añadir una regla a este ""
para que tenga una anchura de 400 pixeles
y lo voy a centrar en la página.
Voy a especificar un margen izquierdo de "margin-left: 100px;",
porque así yo lo veo centrado,
pero tal vez tú no lo veas centrado, porque
tu navegador puede ser más grande o más pequeño.
Lo que queremos es poder decir, "dale el margen
que sea necesario para que los dos lados
queden del mismo tamaño."
Esto es exactamente lo que hace "margin: auto;".
Y es una manera genial de centrar "´s" en una página.
Ahora que hemos centrado ese "",
probablemente queremos modificar esto
añadiendo un borde alrededor de la orilla
usando las propiedades de bordes de CSS.
Vamos a añadir un borde rojo a este "".
Tecleamos "border:" y luego tenemos que
especificar tres aspectos del borde:
grosor, estilo y color. Para un borde
delgado, sólo debo teclear "1px,", para una
línea sólida nada extraordinaria, teclearemos
"solid", y... para que sea roja
voy a hacer que aparezca el selector de color RGB y
seleccionar un bonito, rojo fuego. Ok. Igual que con
el margen, podemos especificar el borde
para sólo uno de los lados. Si queremos un
borde morado y grueso en la parte superior,
añadiremos otra propiedad: "border-top: 10px solid purple;"
¡Genial! Ahora vamos a añadir
un marco a la imagen, y vamos a jugar con
los estilos de bordes. Así que vamos arriba
a nuestro "cute-cat", y vamos a ver... "border: 6px,"
vamos a probar con "groove red". Ok.
No, no me gusta "groove", vamos a probar con "double",
vamos a probar con "ridge". ¡Ajá! Ahora eso se ve como
un marco. Ahora, ¿qué pasa con el borde que tenemos al rededor de
nuestra Información Oficial? Vamos a ver, "border:",
no lo vamos a hacer muy grande, "2px",
vamos a probar "dotted" y luego, déjenme seleccionar...
un gris delicado, déjenme probar
con "dashed". Ok, esto es lo que quiero.
Ahora con todos estos bordes,
hay algo que me molesta un poco.
En realidad, hay algo que me molesta mucho.
¿Ven cómo el texto se está encimando en el borde de "container"?
Y también ¿ven cómo se encima el texto de la Información Oficial?
Eso se ve grotesco,
y el texto se vuelve difícil de leer.
Ahí es donde usamos el relleno (padding). Siempre que
tus elementos tengan colores de fondo o
bordes, querrás añadir relleno
para poner un espacio entre
el contenido y las orillas. Vamos a añadir
relleno ("padding") en "container", vamos a poner
15 pixeles alrededor de "container".
Mucho mejor. Vamos a poner relleno
en "official-info", veamos:
"padding: 6px,", oh, hermoso.
Ahora, no necesitamos añadir relleno a la imagen,
porque las imágenes en realidad se ven bien
dentro de marcos como éste.
Y aquí lo tienen: el Modelo de Caja.
Margen, borde y relleno. Usé valores grandes y
colores brillantes para que lo pudieran apreciar,
pero mi página se ve un poco cursi.
Si quieres que tu página luzca pulcra y sofisticada
prueba usando blancos y grises más sutiles.
Y hagas lo que hagas,
asegúrate de usar esas propiedades, porque
eso tendrá grandes efectos en tu página, cómo
se ve y se siente.