---

Un problema típico que presenta utilizar las mismas etiquetas gráficas para encabezar sus respectivas secciones y para el mapa del Sitio es que en el mapa quedan antiestéticamente desalineadas con respecto a las guías del árbol:

La solución podría pasar por crear etiquetas específicas para el mapa, pero además de ser un trabajo pesado y repetitivo supone duplicar las etiquetas. Mi idea original consistió en utilizar la propiedad clip de CSS. Parecía ideal; se elegía el área de la imagen que se quería mostrar y todo arreglado. Pero no fue la solución, clip sólo funciona en capas con posicionamiento absoluto.

Pensando, pensando, me acordé que en CSS la propiedad margin no sólo permite valores negativos, sino que además se puede aplicar a casi cualquier elemento. Así pues probé a introducir un estilo en las declaraciones de las imágenes, ajustando el margen izquierdo hasta conseguir alinear verticalmente las etiquetas:

<img src="_b5mini.gif" style="margin: 0px 0px 0px -15px;" />
<img src="_enarojo.gif" style="margin: 0px 0px 0px -10px;" />
<img src="_sglogo.gif" style="margin: 0px 0px 0px -19px;" />
<img src="_st.gif" style="margin: 0px 0px 0px -8px;" />

¡¡Funciona!!

---

Notas

Podría haberme limitado a usar la propiedad específica para el margen izquierdo (margin-left), pero preferí la forma abreviada ya que ofrece control simultáneo para todos los márgenes, y en algunos casos también necesité ajustar el margen derecho por exceso para que las guías del árbol no quedaran con cortes cuando las ramas se expandían, como es el caso de la Sección Opinión.

Observa que los parámetros de la forma abreviada, separados por espacios, siguen este orden:

margin: arriba derecha abajo izquierda;

Y que las unidades están expresadas en pixeles (px) aunque esto no deja de ser una elección personal.

Si miras el código fuente de ésta página verás que he dejado muchas cosas sin incluir en el ejemplo, no he puesto la etiqueta alt, que sustituye a la imagen en el caso de dispositivos o navegadores que no las presenten, ni title que, simplificando mucho, sirve para que el navegador muestre la famosa etiqueta amarilla que da título imagen. El Explorer muestra la etiqueta amarilla con el contenido de alt si no existe title, pero ese no es el comportamiento adecuado.

En el ejemplo faltan también las indicaciones de las dimensiones de la imagen. Esto es muy importante puesto que permiten al navegador dibujar la estructura de la página sin necesidad de esperar a descargar la imagen. Hay dos formas de hacerlo, mediante las tradicionales propiedades height (para la anchura) y width (para la altura):

img src="_b5mini.gif" height="32" width="75"

o incluyendo las mismas como un estilo de la imagen:

img src="_b5mini.gif" style="height: 32px; width: 75px;"

En este caso si conviene que las dimensiones se den en pixeles.

En definitiva, que la etiqueta de una imagen debe ser de esta forma:

<img src="_b5mini.gif" alt="Babylon 5" title="Babylon 5" height="32" width="75" style="margin:0px 0px 0px -15px;" />

Los más avispados os habréis dado cuenta de que no hay declaración de la propiedad border. Tradicionalmente los navegadores ponen un borde alrededor de todas las imágenes, este borde siempre resulta molesto, y para evitarlo se incluía, imagen a imagen:

border="0"

Sin embargo, además de que esta propiedad se ha desechado en las últimas versiones del HTML, se puede ahorrar mucho tiempo, esfuerzo y ancho de banda poniendo el borde de todas las imágenes a cero en la hoja de estilo principal, de esta forma:

img
{
     border-width: 0px 0px 0px 0px;
}

Recuerda:

border-width: arriba derecha abajo izquierda;

Con todo:

border: 0px;

Funciona igualmente.

Como nota final he de advertir que el código del ejemplo no se corresponde con el de la página. Esto es debido a que en diciembre de 2011 cambié el estilo del Sitio y desaparecieron la mayoría de las etiquetas gráficas, y con ellas el problema. Las pocas que quedaron se ajustaban a la perfección, así que para ilustrar el uso de los márgenes negativos he tenido que rescribir el artículo y «trucarlo» para que la visualización de los ejemplos se ajuste a las explicaciones. No obstante, todo lo dicho sigue siendo válido.

---