CODEWITHSUNDEEP
htmlcssspace
Fewfre
Fewfre

Reputation: 1519

Space between two divs

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.

example
-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 ;)

Upvotes: 23

Views: 149169

Answers (5)

Fewfre
Fewfre

Reputation: 1519

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>

Upvotes: 1

Christoph
Christoph

Reputation: 51261

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.

Upvotes: 30

Jason Hibbs
Jason Hibbs

Reputation: 167

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

Upvotes: 2

Michael Zaporozhets
Michael Zaporozhets

Reputation: 24566

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:

REFERENCE:

Upvotes: 5

Matt Coughlin
Matt Coughlin

Reputation: 18906

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.

Upvotes: 9

Related Questions