html - 使用 CSS 多列布局留下不需要的顶部和底部边距

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

enter image description here

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

这是我的 CSS:

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

如何去掉边距？

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

最佳答案

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

p {
    margin:0
}

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

关于html - 使用 CSS 多列布局留下不需要的顶部和底部边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14628359/

相关文章：

html - Css 转换不适用于网格