¿como aplicar margenes dentro de una celda?

yomismo0142 · #1 (**permalink**) 24/10/2007, 15:16

Hola, resulta que quiero aplicar margenes a un texto que hay dentro de una celda. Defino la siguiente clase:

.margenes{
margin-left: 21px;
margin-right: 5px;
}

Luego hago lo siguiente: <td class="margenes"> Texto </td>

Tambien habia pensado:

.margenes td{
margin-left: 21px;
margin-right: 5px;
}

Pero ninguna de las dos va.¿Que es lo que hago mal?

Gracias por anticipado!!!

PatomaS · #2 (**permalink**) 24/10/2007, 21:27

Hola

Si lo que quieres es que el texto esté separado de los bordes de la celda, tienes dos formas

1. Aplicar padding a las celdas
2. meter el texto en un span y asignar margin a ese span.

Felicidad

AlZuwaga · #3 (**permalink**) 24/10/2007, 21:49

Puede que me esté confundiendo pero.. ¿margin al span? Pero no debería aplicarle un display:block también?

Un saludo

yomismo0142 · #4 (**permalink**) 25/10/2007, 01:01

¿Te refieres a esto?

.margenes td{
padding-left: 21px;
padding-right: 5px;
}

PatomaS · #5 (**permalink**) 25/10/2007, 01:25

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