Clever Geek Handbook

Using CSS3 columns leaves unwanted top and bottom margins

I am experimenting with CSS3 columns and I noticed that top and bottom margins were added, even though I explicitly set them to 0. Here's a screenshot:

enter image description here

I have highlighted the fields in yellow. The red rectangles are block level block elements drawn from the Firefox toolbar web developer add-on.

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 fields?


edit
Upon request uploaded my code to jsbin . It also shows the discrepancy between the vertices for the two columns. The fields are not showing when I am not using columns.

+3


source to share


1 answer


Your problem is very simple: you are adding css to the content, but the content contains a paragraph with a difference. Reset to 0.

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

...



p{margin:0}

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

+4


source






More articles:


All Articles