Space between two divs

Question

My issue is that I have two (or more) divs of the same class, that need to be spaced from each other. I cannot directly use margins however, as the last or first element would also have the margin applied, which I do not want.

-Green is where I want the space
-Red is where I don't want it

As the only solutions I can think of are complicated / involve hard-coding a value, I am hoping that someone can think of a clever, simple solution to this problem.

Details: Sometimes these divs would be by themselves, and on a rare occasion floated.

Any advice on how above ideas could be better, any new ideas, or just help in general would be greatly appreciated ;)

Forewarn

you really can't use margin-top and margin-bottom? Or is it not working? Margin should work with floats too. – Alleenallegation

Answer 1

You can try something like the following:

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

or instead of the first h1 rule:

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

or even better use the adjacent sibling selector. With the following selector, you could cover your case in one rule:

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

Respectively, h1 + div would control the first div after your header, giving you additional styling options.

Ezra

Answer 2

If you don't require support for IE6:

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

The second line adds spacing between divs, but will not add any before the first div or after the last one.

Guria

Answer 3

Why not use margin? you can apply all kinds off margins to an element. Not just the whole margin around it.

You should use css classes since this is referencing more than one element and you can use id's for those that you want to be different specifically

i.e:

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

Here is a jsfiddle example:

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

REFERENCE:

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

Hilariahilario

Answer 4

DIVs inherently lack any useful meaning, other than to divide, of course.

Best course of action would be to add a meaningful class name to them, and style their individual margins in 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;}

Spectrophotometer

Answer 5

A slightly newer solution to this problem is to put the divs in a container that is display: flex or display: grid and to use the gap css property which will only add a space between elements inside the container, but not before/after.

flex solution:

.wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
header, footer {
    background: red;
    color: white;
}

<header>header</header>
<div class="wrapper">
    <div>section 1</div>
    <div>section 2</div>
    <div>section 3</div>
</div>
<footer>footer</footer>

grid solution:

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
header, footer {
    background: red;
    color: white;
}

<header>header</header>
<div class="wrapper">
    <div>section 1</div>
    <div>section 2</div>
    <div>section 3</div>
</div>
<footer>footer</footer>

Forewarn