Space appearing between divs

Question

I have this issue where a space is appearing between two divs and I don't know what is causing this. Basically it is just one div with three smaller divs of fixed height inside of it. The space is between the block-title and block-content divs. There is no space between the block-content and block-footer

Here is the HTML:

<div class="block buy">
  <div class="block-title">
    <span class="line-1">Title</span>
  </div>
  <div class="block-content">
    <h2></h2>
  </div>
  <div class="block-footer">
  </div>
</div>

And here is the CSS:

.block {
  width: 300px;
  margin-left: auto;
  margin-right: 15px;
  display: inline-block;
  vertical-align: top;
  margin-top: 35px;
  font-weight: 400;
  text-align: left;
}
.block-title {
  height: 70px;
  padding: 20px;
}
.block-content {
  width: 100%;
  height: 255px;
  text-align: center;
}

.block-footer {
  height: 75px;
}
.block-title,
.block-content,
.block-footer {
  color: #fff;
}
.line-1 {
  font-weight: 300;
  font-size: 20px;
  display: block;
}
.buy > * {
  background-color: #558F38;
}

A live JSfiddle is here: JSFiddle

Any ideas why this is happening?

Edit

So the reason why the space appears is because the <h2> elements margin goes outside of the containing div. Why is it not contained inside the div?

check your
the issues is coming from there – Matt Aug 03 '18 at 13:18 — Matt, Aug 03 '18 at 13:18

score 3 · Accepted Answer · answered Aug 03 '18 at 13:17

3

Your h2 has margin that escapes its container and pushes the outer divs. Remove the h2 or remove its margin.

answered Aug 03 '18 at 13:17

Royal Wares

1,192
10
23

Thanks, that was the problem. But why is the margin of `
` going out of the containing `
`?
– martin36 Aug 03 '18 at 13:24
This is the only post that actually answers the question. – Rob Aug 03 '18 at 13:27
2

Margins sometimes behave counter-intuitively, you can find out more about these quirks from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing In your example the margin needed to push off something, it doesn't touch the parent divs, but siblings/uncles etc are all valid to push from and cause the behaviour you saw. – Royal Wares Aug 03 '18 at 13:35
@martin36 Also Google for "collapsing margins". – Rob Aug 03 '18 at 13:40
Thanks, I will do that – martin36 Aug 03 '18 at 14:11

score 0 · Answer 2 · answered Aug 03 '18 at 13:22

0

add this class or remove

from second div

h2 {
    margin: 0;
}

.block {
    width: 300px;
    margin-left: auto;
    margin-right: 15px;
    display: inline-block;
    vertical-align: top;
    margin-top: 35px;
    font-weight: 400;
    text-align: left;
}
.block-title {
    height: 70px;
    padding: 20px;
}
.block-content {
    width: 100%;
    height: 255px;
    text-align: center;
}
.block-footer {
    height: 75px;
}
.block-title, .block-content, .block-footer {
    color: #fff;
}
.line-1 {
    font-weight: 300;
    font-size: 20px;
    display: block;
}
.buy > * {
    background-color: #558F38;
}
h2 {
    margin: 0;
}

<div class="block buy">
  <div class="block-title">
    <span class="line-1">Title</span>
  </div>
  <div class="block-content">
    <h2></h2>
  </div>
  <div class="block-footer">
  </div>
</div>

answered Aug 03 '18 at 13:22

Ankit Jaiswal

274
2
8

1

The question is why, not how to fix it. – Rob Aug 03 '18 at 13:27
@rob h2 has margin that escapes its container and pushes the outer divs. – Ankit Jaiswal Aug 03 '18 at 13:32
Yes. I know that. You should have put that in your answer, not as a comment. – Rob Aug 03 '18 at 13:34
@rob but only you want to know "Why ?" – Ankit Jaiswal Aug 03 '18 at 13:36
You didn't read the question. The question asks why, not how to fix it. – Rob Aug 03 '18 at 13:36
@Rob Gestures is more than enough for a wise man – Ankit Jaiswal Aug 03 '18 at 15:08

score -1 · Answer 3 · answered Aug 03 '18 at 13:24

-1

U can replace display: inline-block with display: inline-grid. Thath solves the problem.

.block {
    width: 300px;
    margin-left: auto;
    margin-right: 15px;
    display: inline-grid;
    vertical-align: top;
    margin-top: 35px;
    font-weight: 400;
    text-align: left;
}

answered Aug 03 '18 at 13:24

Daniel Spiess

222
1
13

The question is why, not how to fix it. – Rob Aug 03 '18 at 13:28
1

Thanks, that seems to work. Why does that work and not `display: inline-block`? – martin36 Aug 03 '18 at 13:28

score -1 · Answer 4 · answered Aug 03 '18 at 13:24

-1

In you css you could add:

h2{
     margin-bottom:0px;
}

answered Aug 03 '18 at 13:24

vitomadio

1,140
8
14

1

The question is why, not how to fix it. – Rob Aug 03 '18 at 13:28

Space appearing between divs

4 Answers4

` going out of the containing ``?

` going out of the containing `
`?