CSS

5. MODELO DE CAJA

Todos los elementos de una web (párrafos, enlaces, imágenes, tablas, etc.) son cajas rectangulares. Los navegadores sitúan estas cajas de la forma que nosotros les hayamos indicado para maquetar la página.

Hay dos tipos de cajas: block e inline. Los elementos block rompen el flujo de maquetación. Esto es, aparecen solos, insertando “saltos de línea”. Los elementos inline siguen el flujo, y están contenidos dentro de elementos de bloque.

Por ejemplo, un párrafo sería un elemento block (no podemos tener un párrafo al lado del otro, sino que dos párrafos seguidos aparecerán uno abajo del otro. En cambio, un enlace es un elemento inline, ya que no “corta” el texto donde está metido.

Estas dos diferencias son importantes, pero hay que tener en mente que ambos tipos comparten el modelo de caja, que es el que aparece en la figura:

Las propiedades más importantes de una caja son: width (ancho), height (alto), padding (relleno), border (borde) y margin (margen).

5.1. Ancho y alto

width representa el ancho interior de la caja y heigh el alto interior de la caja, es decir, sin borde, ni margen, ni relleno. Podemos indicar las medidas con valores absolutos (generalmente píxeles) o relativos (generalmente porcentajes).

Si modificáramos con CSS el ancho o el alto de los elementos inline, no veremos ningún resultado. Esto es debido a que las medidas de los elementos de este tipo se establecen automáticamente ajustándose a las dimensiones del elemento inline. Por ejemplo, si tenemos un enlace que consiste en un texto de cinco caracteres, el ancho (width) de este elemento será lo que ocupen esos cinco caracteres.

5.2. Relleno

El padding es el espacio entre el borde y el límite (interior) de la caja.

Si queremos poner un padding de 20 píxeles para toda la caja, lo haríamos así:

padding : 20px;

Podemos establecer un padding distinto para cada lado, usando los sufijos -top (superior), -bottom (inferior), -left (izquierda) y -right (derecha):

padding-top: 10px;
padding-bottom: 5px;
padding-left: 30px;
padding-right: 20px;

Podemos abreviar lo anterior en una sola línea, indicando primero el padding superior y luego siguiendo el orden de las agujas del reloj. Es decir, nos quedaría: arriba, derecha, abajo, izquierda. El ejemplo anterior se acortaría así:

padding: 10px 20px 5px 30px;

Otro atajo útil es especificar sólo dos medidas: una corresponderían al padding superior e inferior, y la otra a los laterales. Si queremos que los paddings superior e inferior sean de 10 píxeles, y los laterales (izquierdo y derecho) de 20 píxeles, escribimos:

padding: 10px 20px;

5.3. Borde

Si queremos que nuestra caja tenga bordes, lo conseguimos con la propiedad border. Tiene la siguiente sintaxis:

border: width style color;

width especifica el grosor del borde. Normalmente es una medida en píxeles, pero también podemos utilizar las palabras thin (fino), medium (normal) y thick (grueso) que quedan a interpretación del navegador.

En cuanto a style, es el tipo de borde. Hay bastantes, pero los valores más comunes son: solid (línea continua), dashed (línea discontinua), dotted (línea de puntos) y double (línea continua doble).

Por último, color indica el color del borde.

Podemos escoger un tipo de borde diferente para cada lado con los sufijos -top, -bottom, -left y -right. Por ejemplo, para poner que algo tenga el borde inferior de 1 píxel a puntitos rojos:

border-bottom: 1px dotted #f00;

Para eliminar el borde, simplemente ponemos que tiene de grosor 0 píxeles o que el estilo del borde es none. Esto es muy importante con las imágenes, ya que si tenemos una imagen enlazando a algo, los navegadores la ponen con un reborde muy feo. Así que esto se ha convertido ya en un fijo de las hojas de estilos:

img {border: none;}

5.4. Margen

La propiedad margin, establece el espacio entre el borde de la caja y los elementos que la rodean. La manera de utilizarla es igual que con la propiedad padding, así que la forma de escribir y los atajos es exactamente la misma. Por ejemplo, si queremos márgenes superior e inferior de 20 píxeles, y laterales de 5 píxeles:

margin: 20px 5px;

Truco: Para centrar un elemento de bloque, podemos hacer uso de auto:

margin: 0px auto;

5.5. Capas

Hay una etiqueta XHTML que está estrechamente relacionada con CSS: <div>. Esta etiqueta crea una capa, que es un elemento de tipo bloque, y sirve para contener a otros elementos, sean block o inline.

Con las etiquetas <div> organizamos semánticamente la página y las usamos también para maquetar. Además, el atributo id tiene carga semántica, de manera que si quisiéramos hacer la cabecera de nuestra página, con el título y un menú, haríamos esto:

<div id="header">
<h1>Mi blog</h1>
<ul id="menu">
<li><a href="..." title="...">Principal</a></li>
<li><a href="..." title="...">Acerca de</a></li>
<li><a href="..." title="...">Enlaces</a></li>
</ul>
</div>

Si quisiéramos maquetar una página de un blog típico, por ejemplo, haríamos cuatro capas: la cabecera, el contenido principal, la barra lateral y el pie de página, y luego con CSS controlamos su disposición en la página.

5.6. Elementos flotados

Lo que hace la propiedad float es alterar el flujo de la página, “incrustando” un elemento de bloque. Podemos indicar tanto left (para posicionarlo hacia la izquierda) como right (para ubicarlo a la derecha) y hacer que los elementos adyacentes fluyan alrededor del elemento flotado.

El elemento flotado (a excepción de las imágenes) debe tener definida su anchura para que la propiedad float funcione.

El ejemplo más típico es el de si queremos poner una imagen acompañando a un texto, y que el texto “envuelva” a la imagen. Esto lo conseguimos creando una clase como la siguiente:

.izquierda {
width: 100px; float: left;
}

Siguiendo con el ejemplo del blog, es normal maquetarlo ubicar el contenido principal y la barra lateral mediante floats. Lo que suele pasar es que una de estas dos columnas pasa por encima del pie de página, en lugar de quedar el pie al final de todo o que el pie se ubique al lado de las cajas flotadas y no debajo. Estos, como otros “sucesos paranormales” que suelen ocurrir con los floats, desaparecen con la propiedad clear, que se ocupa de “limpiar” lo que está a uno (valores left o right) o ambos (valor both) de los lados del elemento flotado. Por ejemplo:

#footer {
clear: both;
}