CSS Margin between div

Question

I have a very simple html code but I don't understand where is the problem.

I have this code:

.margin {
  margin: 10px;
}

<div>
  <div class="margin">Test test</div>
  <div class="margin">Test test</div>
  <div class="margin">Test test</div>
</div>

So I would like a margin of 20px between the divs. But in fact the browser just enter only 10px between the divs.

How it's possible? Someone can help me?

You are setting the margin as 10px thats why you have 10 – Phil3992 Sep 27 '17 at 14:51 — Phil3992, Sep 27 '17 at 14:51

score 0 · Answer 1 · answered Sep 27 '17 at 14:51

0

it is normal, the default behavior of the "margin" property. the margin takes the max of the margin between the two div

use margin:20px if you want a margin of 20px between the div

answered Sep 27 '17 at 14:51

Mahmoud

score 0 · Answer 2 · answered Sep 27 '17 at 14:52

0

It is merging the two margins. I'd recommend using something like:

.margin {
  margin: 20px 10px;
}

answered Sep 27 '17 at 14:52

assisrMatheus

score 0 · Answer 3 · answered Sep 27 '17 at 14:53

margins of adjacent elements collapse - only the greater one of the two will apply, the other one is ignored. See my example.

div {
  border: 1px solid green;
}
.margin1 {
  margin: 10px;
}
.margin2 {
  margin: 20px;
}
.margin3 {
  margin: 30px;
}

<div>
  <div class="margin1">Test test</div>
  <div class="margin2">Test test</div>
  <div class="margin3">Test test</div>
</div>

If you want to have 20px between your DIVs, do it as follows:

div {
  border: 1px solid green;
}
.margin {
  margin: 10px;
  margin-bottom: 20px;
}
.margin:last-child {
  margin-bottom: 10px;
}

<div>
  <div class="margin">Test test</div>
  <div class="margin">Test test</div>
  <div class="margin">Test test</div>
</div>

3 Answers3