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:
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
stevenvh
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
Ricardo castañeda
source
to share