Пространство между двумя divs

Моя проблема в том, что у меня есть два (или более) div одного класса, которые должны быть отделены друг от друга. Однако я не могу напрямую использовать поля, поскольку последний или первый элемент также будет иметь применяемый маркер, который я не хочу.

example
-Green - это то место, где я хочу пространство
-Red, где я не хочу его

Как единственные решения, о которых я могу думать, сложны/связаны с жестким кодированием ценности, я надеюсь, что кто-то может подумать об умном и простом решении этой проблемы.

Детали: Иногда эти divs были бы сами по себе и в редких случаях плавали.

Любые советы о том, как выше идеи могут быть лучше, любые новые идеи или просто помощь в целом были бы очень благодарны;)

Ответы

Ответ 1

Вы можете попробовать что-то вроде следующего:

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

или вместо первого правила h1:

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

или даже лучше использовать смежный селектор. С помощью следующего селектора вы можете закрыть свой случай в одном правиле:

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

Соответственно, h1 + div будет управлять первым div после заголовка, предоставив вам дополнительные параметры стиля.

Ответ 2

Если вам не нужна поддержка IE6:

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

Вторая строка добавляет промежуток между div, но не добавит ни одного до первого div или после последнего.

Ответ 3

Почему бы не использовать маржу? вы можете применять все виды от полей к элементу. Не только весь запас вокруг него.

Вы должны использовать классы css, поскольку это ссылается на несколько элементов, и вы можете использовать id для тех, которые вы хотите быть разными.

то есть:

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

Вот пример jsfiddle:

ССЫЛКА:

Ответ 4

DIVs по своей природе не имеет никакого полезного значения, кроме как разделить, конечно.

Лучшим направлением действий было бы добавить им значимое имя класса и стиль их отдельных полей в 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;}