persistent space between divs/sections

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>

It’s not “magic”, it’s `margin-top` of the `h2` and the `margin-bottom` of the `h4` that those get from the browser stylesheet. Your (re-search) keyword is _collapsing margins_ resp. _adjoining margins_. -1 because a) this has been discussed a lot already, and b) would’ve been easy enough for you to find out yourself using your browser’s developer tools. — CBroe, Nov 25 '14 at 21:34
Try a CSS reset. It scraps all the browser CSS defaults and sets a baseline, usually with minimal styling. You'll have to add styles back in, but it eliminates a lot of surprises. — Surreal Dreams, Nov 25 '14 at 21:35

score 1 · Answer 1 · answered Nov 25 '14 at 21:34

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>

That was it.Figures I missed something this simple. Thanks for the help! — evil professeur, Nov 25 '14 at 21:42

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

Check this link: How to remove the gap between div in html?

Use

* {
    padding: 0px;
    margin: 0px
}

at the top of your CSS

edited May 23 '17 at 10:33

Community

1
1

answered Nov 25 '14 at 21:34

Thomas Helms

1
1

ablueman · Answer 3 · 2014-11-26T13:38:08.020

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.

persistent space between divs/sections

3 Answers3