Foros del Web » Creando para Internet » CSS »

Espacio entre Div

Estas en el tema de Espacio entre Div en el foro de CSS en Foros del Web. Buenas tardes Tengo un div con unas dimensiones de altura y ancho definido con css, dentro de este div tengo tres div mas, los cuales ...
  #1 (permalink)  
Antiguo 16/09/2011, 15:47
 
Fecha de Ingreso: noviembre-2010
Mensajes: 204
Antigüedad: 10 años, 11 meses
Puntos: 1
Pregunta Espacio entre Div

Buenas tardes

Tengo un div con unas dimensiones de altura y ancho definido con css, dentro de este div tengo tres div mas, los cuales necesito que queden uno al lado del otro horizontalmente, sin espacio entre ellos.

Actualmente los tres div quedan dentro del div externo, pero quedan con un margen de separacion y yo necesito que queden uno al lado del otro pero sin espacio entre ellos.

He utilizado margen 0;0;0;0 y padding 0;0;0;0 en el div externo pero no me funciona, que puedo hacer para que no haya espacio entre los div internos.

Por su colaboracion gracias

Isabel.
  #2 (permalink)  
Antiguo 16/09/2011, 17:20
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 10 años, 6 meses
Puntos: 37
Respuesta: Espacio entre Div

Hola Isabel.

Se trata de repartir bien el espacio entre ellos y flotarlos. Te dejo un ejemplo de cómo sería:

Código HTML:
Ver original
  1. <style type="text/css">
  2. #capa_externa
  3. {
  4.   width: 450px;
  5. }
  6. .flotada
  7. {
  8.   float: left;
  9.   width: 150px;
  10. }
  11. #capa_externa , .flotada
  12. {
  13.   margin: 0;
  14.   padding: 0;
  15.   height: 600px;
  16. }
  17. </head>
  18.   <div id="capa_externa">
  19.     <div class="flotada" style="background: lightblue;"><p>hola</p></div>
  20.     <div class="flotada" style="background: red;"><p>que tal</p></div>
  21.     <div class="flotada" style="background: lightgreen;"><p>estás</p></div>
  22.   </div>
  23. </body>
  24. </html>

Si copias y pegas en un html verás el resultado.


Un saludo.
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.
  #3 (permalink)  
Antiguo 16/09/2011, 21:14
 
Fecha de Ingreso: noviembre-2010
Mensajes: 204
Antigüedad: 10 años, 11 meses
Puntos: 1
Respuesta: Espacio entre Div

KoswiDigital, mil gracias lo adpate a lo que necesitaba y me funciono perfecto.

Sin embargo me queda una duda, no entendi muy bien la instruccion; por que la instruccion (#capa_externa , .flotada) combina dos definciones #capa_externa y .flotada.


#capa_externa , .flotada
{
margin: 0;
padding: 0;
height: 600px;
}

Disculpa mi ignorancia pero es que apenas estoy aprendiendo

Mil gracias
  #4 (permalink)  
Antiguo 16/09/2011, 23:18
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 12 años, 8 meses
Puntos: 306
Respuesta: Espacio entre Div

Hola, perdón que me meta, pero ya que estamos:

eso se hace para no repetir lo mismo en distintas clases.
Escrito en forma normal sería:
Código CSS:
Ver original
  1. #capa_externa
  2. {
  3.   width: 450px;
  4.   margin: 0;
  5.   padding: 0;
  6.   height: 600px;
  7. }
  8. .flotada
  9. {
  10.   float: left;
  11.   width: 150px;
  12.   margin: 0;
  13.   padding: 0;
  14.   height: 600px;
  15. }

Es una forma de abreviar el código, o no repetir el código.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 17/09/2011, 06:44
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 10 años, 6 meses
Puntos: 37
Respuesta: Espacio entre Div

Eso es. Imagina que 4 capas llevan el mismo ancho. Para no repetir, pondrías:

Código CSS:
Ver original
  1. .capa1 , .capa2 , .capa3 , .capa4
  2. {
  3.   width: 200px;
  4. }

Le das la misma {propiedad:valor} a las 4 capas de un sólo golpe. Suele resultar bastante útil para no tener que repetir código.


Para lo que sea, por aquí seguimos ^^

Un saludo.
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.
  #6 (permalink)  
Antiguo 18/09/2011, 20:24
 
Fecha de Ingreso: noviembre-2010
Mensajes: 204
Antigüedad: 10 años, 11 meses
Puntos: 1
Respuesta: Espacio entre Div

Buenas tardes

Señores, muy clara su explicacion.

Mil gracias

Isabel

Etiquetas: ancho, espacio
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 10:43.