Using CSS multi-column layout leaves unwanted top and bottom margin

Question

I'm experimenting with CSS3 columns, and I noticed there are top and bottom margins added, despite that I explicitly set them to 0. Here's a screenshot:

I've highlighted the margins in yellow. The red rectangles are block level element outlines drawn from the Web Developer Toolbar add-on in Firefox.

Here's my CSS:

.section .content {
  -moz-column-count: 2;
  -moz-column-gap: 26px;
  margin: 0px;
  padding: 0px;
}

How can I get rid of the margins?

Upon request uploaded my code to jsbin. It also shows the discrepancy between the tops for the two columns. The margin doesn't show when I don't use columns.

Answer 1

Your problem is very simple, you are adding CSS to content, but content contains a paragraph with a margin. Reset it to 0.

p {
    margin:0
}

<div class="section">
    <h1>Heading 1</h1>
    <div class="content">
        <p>
        </p>
    </div>
</div>

http://jsbin.com/ufobax/2/edit