Question

I have a layout that should be fairly straightforward, but for some unknown reason there is just this magical space appearing from …… nothing. There is no element for it. I can’t explain it.

I have a picture, and a jsFiddle that reproduces the problem. This happens across all browsers.

http://jsfiddle.net/ciel/qSQ7b/

Answer 1

It’s coming from the p element in here:

<div class="container"> 
    <article>
        <p>
            This information is appearing below a strange white bar that really shouldn't be there...
        </p>
    </article>
</div>

You’re getting bitten by collapsing margins:

• http://reference.sitepoint.com/css/collapsingmargins
• http://www.w3.org/TR/CSS2/box.html#collapsing-margins

To fix it, you could add overflow: hidden to your article, like this: http://jsfiddle.net/qSQ7b/3/