persistent space between divs/sections - html

Question

I realize the question has been asked several times over, but frankly I didn't manage to find an actual answer in any of the instances.
Whatever I try I cannot get rid of the spaces between divs? here is a simplified version of the problem, and a jsfiddle: http://jsfiddle.net/hhLopqwm/1/ . Any ideas? How can I make the divs connect?
<div class="top">
so what <br><br> is going on here
</div>
<div id="work">
<h2>no margins control this space between divs</h2>
<h4>it's like magic or something</h4>
</div>
<div class="red">
any clue what should I do?
</div>

Answer 1

Heading elements (in your example <h2> and <h4>) have margins too which push the parent divs apart:
div, h2, h4 {
margin:0;
padding:0;
}
html {
margin: 0;
padding: 0;
}
.top {
background-color:yellow;
text-align: center;
margin: 0;
padding:0;
}
#work {
background-color:green;
margin:0;
padding:0;
text-align: center;
}
div, h2, h4 {
margin:0;
padding:0;
}
.red {
text-align: center;
background-color:red;
}
<div class="top">so what the hell
<br>
<br>is going on here</div>
<div id="work">
<h2>no margins control this space between divs</h2>
<h4>it's like magic or something</h4>
</div>
<div class="red">any clue what should I do?</div>

Answer 2

Check this link:
How to remove the gap between div in html?
Use
* {
padding: 0px;
margin: 0px
}
at the top of your CSS

Answer 3

H2, H4 {margin: 0;} will fix it, as mentioned previously its the margin on those.
You could also use padding to push the div out the appropriate amount, or a min-height to resolve the issue.
Personnally I would probably just remove the margin from all H1/2/3/4/5/6.
I wouldnt even use a reset since typically this adds more CSS than its worth.
My standard reset would be html, body, H1, h2, h3, h4, h5 {margin:0; padding:0;}
Please DO NOT use: * {margin: 0; padding 0;}
This is generally bad practice and can and will break some forms etc, google it if you want further information.
Heres some of the cons:
http://www.cssreset.com/scripts/universal-selector-css-reset/
•No control over exactly which elements are reset – every element used in the document must now have its margin and padding set explicity, plus any other properties such as border and outline that may be included in the reset (see the extended version below).
•Wave goodbye to inheritance of CSS rules from parent to child elements – the universal selector wins out every time (see note on inheritance, below). So not only must every element be defined after the reset, but child elements now cannot inherit each element’s properties, and so they must also be explicitly defined. The amount of code this requires may even negate the size-savings from the minimal CSS Reset!
•According to the universal declaration, a browser must run through every element on the page and apply the universal rule: elements, their children and great-great-great-grandchildren all alike, and some claim that this may be a huge hit on resources and page load times (this point is debatable for modern browsers.)
•Also – and this might be the deal-breaker for many – Internet Explorer 6 and 7 don’t support the universal selector.