Dejar espacio entre los Divs

aagguuu · #1 (**permalink**) 17/02/2011, 17:10

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.

ArturoGallegos · #2 (**permalink**) 17/02/2011, 17:30

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

elfeme · #3 (**permalink**) 17/02/2011, 17:33

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.

ArturoGallegos · #4 (**permalink**) 17/02/2011, 17:43

Cita:

Iniciado por elfeme

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?

elfeme · #5 (**permalink**) 17/02/2011, 17:46

Cita:

Iniciado por Ag666

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.

ArturoGallegos · #6 (**permalink**) 17/02/2011, 17:59

Cita:

Iniciado por elfeme

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-MX" lang="es-MX">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Sin título 6</title> 
<style type="text/css">
#Content{width:120px;}
#Content div{margin:5px 0;width:120px;border:1px #03f solid;border-top-width:8px;}
</style>    
</head>
<body>
 
<div id="Content">
    <div>Contenido 1</div>
    <div>Contenido 2</div>
    <div>Contenido 3</div>
</div>
 
</body>
</html>

compañero elfeme usted en su código coloco

Código CSS:

Ver original#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

aagguuu · #7 (**permalink**) 17/02/2011, 18:04

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