css - para - div significado

Espacio entre dos divs

Question

Mi problema es que tengo dos (o más) divs de la misma clase, que deben estar separados unos de otros. Sin embargo, no puedo usar márgenes directamente, ya que el último o primer elemento también tendría el margen aplicado, que no quiero.

-Green es donde quiero el espacio.
-Red es donde no lo quiero

Como las únicas soluciones que puedo pensar son complicadas / implican un valor de codificación rígida, espero que alguien pueda pensar en una solución inteligente y simple para este problema.

Detalles : a veces estos divs serían solos y, en raras ocasiones, flotaban.

Cualquier consejo sobre cómo podrían ser mejores las ideas anteriores, cualquier idea nueva o simplemente ayuda en general sería muy apreciado;)

Answer 1

¿Por qué no usar el margen? Puedes aplicar todo tipo de márgenes a un elemento. No solo todo el margen a su alrededor.

Debería usar clases css ya que esto hace referencia a más de un elemento y puede usar los identificadores para aquellos que desea que sean diferentes específicamente

es decir:

<style>
.box { height: 50px; background: #0F0; width: 100%; margin-top: 10px; }
#first { margin-top: 20px; }
#second { background: #00F; }
h1.box { background: #F00; margin-bottom: 50px;  }
</style>

<h1 class="box">Hello World</h1>
<div class="box" id="first"></div>
<div class="box" id="second"></div>​

Aquí hay un ejemplo de jsfiddle:

• http://jsfiddle.net/baXmu/2/

REFERENCIA:

• http://www.html.net/tutorials/css/lesson10.php

Answer 2

Los DIV carecen inherentemente de cualquier significado útil, aparte de dividir, por supuesto.

El mejor curso de acción sería agregarles un nombre de clase significativo y diseñar sus márgenes individuales en CSS.

<h1>Important Title</h1>
<div class="testimonials">...</div>
<div class="footer">...</div>

h1 {margin-bottom: 0.1em;}
div.testimonials {margin-bottom: 0.2em;}
div.footer {margin-bottom: 0;}

Answer 3

Puedes probar algo como lo siguiente:

h1{
   margin-bottom:<x>px;
}
div{
   margin-bottom:<y>px;
}
div:last-of-type{
   margin-bottom:0;
}

o en lugar de la primera regla h1 :

div:first-of-type{
   margin-top:<x>px;
}

o incluso mejor usar el selector de hermanos adyacente . Con el siguiente selector, podría cubrir su caso en una regla:

div + div{
   margin-bottom:<y>px;
}

Respectivamente, h1 + div controlaría el primer div después de su encabezado, brindándole opciones de estilo adicionales.

Answer 4

Si no necesita soporte para IE6:

h1 {margin-bottom:20px;}
div + div {margin-top:10px;}

La segunda línea agrega espacio entre divs, pero no agregará ninguna antes de la primera div o después de la última.