使用 CSS 多列布局会留下不需要的顶部和底部边距答案

【问题标题】：Using CSS multi-column layout leaves unwanted top and bottom margin使用 CSS 多列布局会留下不需要的顶部和底部边距
【发布时间】：2013-01-31 14:40:11
【问题描述】：

我正在尝试使用 CSS3 列，我注意到添加了顶部和底部边距，尽管我明确将它们设置为 0。这是一个屏幕截图：

我已用黄色突出显示边距。红色矩形是从 Firefox 中的 Web Developer Toolbar 插件绘制的块级元素轮廓。

这是我的 CSS：

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

我怎样才能摆脱边距？

根据要求将我的代码上传到jsbin。它还显示了两列顶部之间的差异。当我不使用列时，边距不显示。

【问题讨论】：

@Michael - 似乎失败了。我首先收到“500 内部服务器错误”，但现在 iidrn.com 确认它已关闭。
jsFiddle 已关闭，试试这个jsbin.com ..... 你确定那个边距不是 h1 的边距底部吗？如果您删除列 css 会发生什么，您还能看到那个边距吗？
@Cadence - 我在 jsbin 上添加了指向我的代码的链接。如果我不使用列，边距不会显示。所以它不是来自 h1 的边距（这也将显示第二个 coumn 的边距，IMO）。感谢您的回复。

【解决方案1】：

您的问题很简单，您正在向内容添加 CSS，但内容包含一个带边距的段落。将其重置为 0。

p {
    margin:0
}

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

【讨论】：