Espacio entre Div

isabelramirezmontoya · #1 (**permalink**) 16/09/2011, 15:47

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.

KoswiDigital · #2 (**permalink**) 16/09/2011, 17:20

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<html>
<head>
<style type="text/css">
#capa_externa
{
  width: 450px;
}
.flotada
{
  float: left;
  width: 150px;
}
#capa_externa , .flotada
{
  margin: 0;
  padding: 0;
  height: 600px;
}
</style>
</head>
<body>
  <div id="capa_externa">
    <div class="flotada" style="background: lightblue;"><p>hola</p></div>
    <div class="flotada" style="background: red;"><p>que tal</p></div>
    <div class="flotada" style="background: lightgreen;"><p>estás</p></div>
  </div>
</body>
</html>

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

Un saludo.

isabelramirezmontoya · #3 (**permalink**) 16/09/2011, 21:14

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

C2am · #4 (**permalink**) 16/09/2011, 23:18

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#capa_externa
{
  width: 450px;
  margin: 0;
  padding: 0;
  height: 600px;
}
.flotada
{
  float: left;
  width: 150px;
  margin: 0;
  padding: 0;
  height: 600px;
}

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

Saludos

KoswiDigital · #5 (**permalink**) 17/09/2011, 06:44

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

Código CSS:

Ver original.capa1 , .capa2 , .capa3 , .capa4
{
  width: 200px;
}

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.

isabelramirezmontoya · #6 (**permalink**) 18/09/2011, 20:24

Buenas tardes

Señores, muy clara su explicacion.

Mil gracias

Isabel