Foros del Web » Creando para Internet » CSS »

Dejar espacio entre los Divs

Estas en el tema de Dejar espacio entre los Divs en el foro de CSS en Foros del Web. Hola a todos :) Bueno, queria saber como hacer para dejar espacio entre los divs, como aca y si es posible tambien como poner los ...
  #1 (permalink)  
Antiguo 17/02/2011, 17:10
 
Fecha de Ingreso: mayo-2010
Mensajes: 21
Antigüedad: 13 años, 9 meses
Puntos: 1
Dejar espacio entre los Divs

Hola a todos :) Bueno, queria saber como hacer para dejar espacio entre los divs, como aca y si es posible tambien como poner los bordes asi y con color:

espero que me puedan ayudar :) Gracias de antemano.
  #2 (permalink)  
Antiguo 17/02/2011, 17:30
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años
Puntos: 1146
Respuesta: Dejar espacio entre los Divs

si has preguntado eso, deberías darte una pasada por librosweb en la sección CSS
a leer se a dicho ñ.ñ

lo que buscas esta en las propiedades margin y border
  #3 (permalink)  
Antiguo 17/02/2011, 17:33
 
Fecha de Ingreso: abril-2010
Ubicación: Argentina
Mensajes: 57
Antigüedad: 13 años, 11 meses
Puntos: 1
Respuesta: Dejar espacio entre los Divs

Agus, eso se hace con el elemento 'margin' del css. Te dejo un ejemplo donde estan separados por 5px tanto arriba como abajo, a excepción del div2 que solo posee margin a los costados.

Código PHP:
<html>
<
head>
    <
title>Divs with Margins</title>
    <
style>
        
#div1, #div2, #div3 {background-color: #f4f4f4; margin: 5px; width: 50px; height: 80px;}
        #div2 {margin-top: 0px; margin-bottom: 0px; !important}
    
</style>
</
head>
<
body>
    <
div id="div1"></div>
    <
div id="div2"></div>
    <
div id="div3"></div>
</
body>
</
html
PD: Para que tengan color y borde se usan background-color y border. Saludos.
  #4 (permalink)  
Antiguo 17/02/2011, 17:43
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años
Puntos: 1146
Respuesta: Dejar espacio entre los Divs

Cita:
Iniciado por elfeme Ver Mensaje
Agus, eso se hace con el elemento 'margin' del css. Te dejo un ejemplo donde estan separados por 5px tanto arriba como abajo, a excepción del div2 que solo posee margin a los costados.

Código PHP:
<html>
<
head>
    <
title>Divs with Margins</title>
    <
style>
        
#div1, #div2, #div3 {background-color: #f4f4f4; margin: 5px; width: 50px; height: 80px;}
        #div2 {margin-top: 0px; margin-bottom: 0px; !important}
    
</style>
</
head>
<
body>
    <
div id="div1"></div>
    <
div id="div2"></div>
    <
div id="div3"></div>
</
body>
</
html
Compañero sin afan de molestarlo... y el doctype donde me lo dejo?
le recomiendo que jamas deje que un navegador trabaje en modo quirs o los resultados pueden ser desastrosos...

por otro lado no cree que si pregunto como colocar un borde y un margen es porque apenas esta empezando y lo mejor es solo dar material de lectura?
  #5 (permalink)  
Antiguo 17/02/2011, 17:46
 
Fecha de Ingreso: abril-2010
Ubicación: Argentina
Mensajes: 57
Antigüedad: 13 años, 11 meses
Puntos: 1
Respuesta: Dejar espacio entre los Divs

Cita:
Iniciado por Ag666 Ver Mensaje
Compañero sin afan de molestarlo... y el doctype donde me lo dejo?
le recomiendo que jamas deje que un navegador trabaje en modo quirs o los resultados pueden ser desastrosos...

por otro lado no cree que si pregunto como colocar un borde y un margen es porque apenas esta empezando y lo mejor es solo dar material de lectura?
El no esta preguntando por el doctype. Se que es importante, pero el ejemplo no lo requiere.
Y la verdad que a mi parecer, cuanto mas cosas para dejar, mejor.
  #6 (permalink)  
Antiguo 17/02/2011, 17:59
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años
Puntos: 1146
Respuesta: Dejar espacio entre los Divs

Cita:
Iniciado por elfeme Ver Mensaje
El no esta preguntando por el doctype. Se que es importante, pero el ejemplo no lo requiere.
Y la verdad que a mi parecer, cuanto mas cosas para dejar, mejor.
esta bien pero no se me enoje

jeje ciertamente el ejemplo no lo requiere, pero si lo vemos por el lado de que no conoce mucho del tema si le damos un ejemplo a medias este lo tomara como bueno... y si no le mostramos el buen camino indicando la necesidad del doctype aun cuando es un ejemplo se nos ira de lado mas adelante.

ñ.ñ tranquilos tampoco es para pelear

y ya que vamos a lanzar códigos se hace así:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-MX" lang="es-MX">
  3.     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  4.     <title>Sin título 6</title>
  5. <style type="text/css">
  6. #Content{width:120px;}
  7. #Content div{margin:5px 0;width:120px;border:1px #03f solid;border-top-width:8px;}
  8. </style>    
  9. </head>
  10.  
  11. <div id="Content">
  12.     <div>Contenido 1</div>
  13.     <div>Contenido 2</div>
  14.     <div>Contenido 3</div>
  15. </div>
  16.  
  17. </body>
  18. </html>

compañero elfeme usted en su código coloco
Código CSS:
Ver original
  1. #div2 {margin-top: 0px; margin-bottom: 0px; !important}

cuando coloca algún valor en 0 (cero) no es necesario especificar ninguna unidad de medida ya que sea cual sea la unidad de medida es igual e irrelevante

ademas coloco !important que esta fuera de lugar, notese que lo coloco después del punto y coma. y para finalizar por la jerarquía del css no es necesario aplicar el atributo !important
  #7 (permalink)  
Antiguo 17/02/2011, 18:04
 
Fecha de Ingreso: mayo-2010
Mensajes: 21
Antigüedad: 13 años, 9 meses
Puntos: 1
Respuesta: Dejar espacio entre los Divs

Ya pude hacer lo que queria, no es necesario que se peleen, muchas gracias a los 2 por los datos y la informacion. :)

Etiquetas: dejar, 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




La zona horaria es GMT -6. Ahora son las 04:38.