Foros del Web » Creando para Internet » CSS »

¿como aplicar margenes dentro de una celda?

Estas en el tema de ¿como aplicar margenes dentro de una celda? en el foro de CSS en Foros del Web. 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; } ...
  #1 (permalink)  
Antiguo 24/10/2007, 16:16
 
Fecha de Ingreso: octubre-2007
Mensajes: 44
Antigüedad: 10 años, 1 mes
Puntos: 1
¿como aplicar margenes dentro de una celda?

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!!!
  #2 (permalink)  
Antiguo 24/10/2007, 22:27
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Re: ¿como aplicar margenes dentro de una celda?

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
__________________
¡ hey, hou, hou, hey !
  #3 (permalink)  
Antiguo 24/10/2007, 22:49
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: ¿como aplicar margenes dentro de una celda?

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

Un saludo
__________________
...___...
  #4 (permalink)  
Antiguo 25/10/2007, 02:01
 
Fecha de Ingreso: octubre-2007
Mensajes: 44
Antigüedad: 10 años, 1 mes
Puntos: 1
Re: ¿como aplicar margenes dentro de una celda?

¿Te refieres a esto?


.margenes td{
padding-left: 21px;
padding-right: 5px;
}
  #5 (permalink)  
Antiguo 25/10/2007, 02:25
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Márgenes a un elemento en una celda

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
__________________
¡ hey, hou, hou, hey !
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 08:11.