Leerzeichen zwischen zwei divs

Question

Mein Problem ist, dass ich zwei (oder mehr) divs der gleichen Klasse haben, die voneinander beabstandet sein müssen. Ich kann die Margen jedoch nicht direkt verwenden, da das letzte oder erste Element auch die Marge hätte, die ich nicht haben möchte.

-Green ist, wo ich den Raum wollen
-Red ist, wo ich es nicht

Als einzige Lösungen möchte ich sind kompliziert/beinhalten Hartcodierung einen Wert denken kann, ich Ich hoffe, dass jemand eine kluge, einfache Lösung für dieses Problem finden kann.

Details: Manchmal waren diese divs von sich selbst, und in seltenen Fällen schwammen sie.

Alle Ratschläge, wie oben Ideen könnte besser sein, keine neuen Ideen oder im Allgemeinen nur helfen würde sehr geschätzt werden;)

Answer 1

Sie so etwas wie die folgende versuchen:

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

oder statt die ersten h1 Regel:

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

oder noch besser die adjacent sibling selector verwenden. Mit dem folgenden Selektor, könnten Sie Ihren Fall in einer Regel decken:

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

Beziehungsweise h1 + div würde das erste div nach dem Header steuern Sie zusätzliche Gestaltungsmöglichkeiten geben.

Answer 2

Warum nicht Rand verwenden? Sie können alle Arten von Randbereichen auf ein Element anwenden. Nicht nur der ganze Rand um ihn herum.

Sie sollten CSS-Klassen verwenden, da dies mehr als ein Element verweisen und Sie können IDs für diejenigen, die Sie anders sein wollen speziell

dh:

<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>​ 

Hier ist ein jsfiddle Beispiel:

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

REFERENZ:

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

Answer 3

Wenn Sie benötigen keine Unterstützung für IE6:

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

Der zweite Zeilenabstand zwischen divs fügt hinzu, sie wird jedoch nicht vor dem ersten div hinzufügen oder nach dem letzten.

Answer 4

DIVs inhärent fehlt jede nützliche Bedeutung, außer zu teilen, natürlich.

Die beste Vorgehensweise wäre es, ihnen einen aussagekräftigen Klassennamen hinzuzufügen und ihre individuellen Ränder in CSS zu gestalten.

<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;}