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

Question

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

在此处输入图像描述

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

这是我的CSS：

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

我怎样才能摆脱边缘？

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

score 4 · Accepted Answer

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

p {
    margin:0
}

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

1 回答 1