html - CSS の複数列レイアウトを使用すると、不要な上下の余白が残る

Question

私は CSS3 列を試しています。明示的に 0 に設定しているにもかかわらず、上下の余白が追加されていることに気付きました。スクリーンショットは次のとおりです。

ここに画像の説明を入力

余白を黄色で強調表示しました。赤い四角形は、Firefox の Web 開発者ツールバーアドオンから描画されたブロックレベル要素のアウトラインです。

これが私のCSSです：

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

どうすればマージンを取り除くことができますか?

リクエストに応じて、私のコードをjsbinにアップロードしました。また、2 つの列の上部の不一致も示しています。列を使用しないと余白が表示されません。

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