使用 CSS 多列布局會留下不需要的頂部和底部邊距

Question

我正在試驗 CSS3 列，我注意到添加了頂部和底部邊距，盡管我明確將它們設置為 0。這是一個屏幕截圖：

我用黃色突出顯示了邊距。 紅色矩形是從 Firefox 中的 Web Developer Toolbar 附加組件繪制的塊級元素輪廓。

這是我的 CSS：

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

我怎樣才能擺脫邊緣？

根據要求將我的代碼上傳到jsbin 。 它還顯示了兩列頂部之間的差異。 當我不使用列時，邊距不顯示。

Answer 1

您的問題很簡單，您正在向內容添加 CSS，但內容包含一個帶有邊距的段落。 將其重置為 0。

 p { margin:0 }

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

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