Hola
Muy buen apunte Al Zuwaga
Veamos.
Los
span son elementos
inline, por lo que si les aplicas
margin, dichos bordes no deben colapsar, solaparse o unirse (propiedad border-collapse), por lo que al asignarle una dimensión, debe respetarse , y añadirse en las posiciones correctas.
Sin embargo, varios navegadores, yo diría que todos, cumplen mal de alguna forma esta regla. En el motor
Gecko, solo los añade a la izquierda, separando el contenido de la caja anterior o del borde izquierdo del contenedor.
En Explorer, aparentemente está bien ya que añade el espaciado en todas las direcciones, sin embargo, solo funciona en casos como el ejemplo que adjunto, donde controlas todos los demás margenes, espacios y bordes de los elementos, de lo contrario, chocas con el
bug de la mala interpretación del margen.
En Konqueror, hasta la última versión que vi, lo hacía bien, pero creo que ahora se comporta como Firefox. No tengo Konkeror, así que no puedo probarlo. En Safari se comporta como Firefox y en Opera se comporta como un híbrido, dejando espacios a ambos lados, pero no verticalmente.
Hay que decir que el comportamiento de Opera es el que tiene más sentido y se ajusta a una de las opciones de las reglas. Digo que tiene más sentido porque si consideramos que los elementos
inline no generan saltos, solo deben tener márgenes hacia los lados.
En cualquier caso, y salvando la palabrería anterior, si usas un
div en vez de un
span, logras el efecto más estándar. Y de paso, a mi me pillaron pensando en Explorer, no volverá a pasar.
Por cierto, dejo un ejemplito aqui para que prueben si gustan los efectos en diversos navegadores.
Código HTML:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<style type="text/css">
* {border: 0; margin: 0; padding: 0;}
html,body { width: 100%; height: 100%; background-color: #fff; }
#Base { width: 100%; height: 100%; background-color: #ccc;}
#uno {position: absolute; top: 100px; left: 100px; width: 200px;}
#dos {position: absolute; top: 100px; left: 300px; width: 200px;}
#tres {position: absolute; top: 100px; left: 500px; width: 200px;}
table {border: 1px solid #f00;}
td {border: 1px solid #0f0;}
#uno td {padding: 10px;}
#dos span {margin: 30px;}
#tres span {display: block; margin: 10px;}
</style>
<title>Márgenes a un elemento dentro de una celda</title>
</head>
<body>
<div id="Base">
<div id="uno">
<table>
<tr>
<td>
<span>texto en la celda</span>
</td>
</tr>
</table>
</div>
<div id="dos">
<table>
<tr>
<td>
<span>texto en la celda</span>
</td>
</tr>
</table>
</div>
<div id="tres">
<table>
<tr>
<td>
<span>texto en la celda</span>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
No hay grandes variaciones si le agregan la propiedad [I]collapse[/I] a la tabla.
Felicidad