CSS3のマルチカラムレイアウトでブロック要素を多段組みした時に発生する不可解な余白 | briccolog

CSS3では、ブロック要素の内部を多段組みで表示するマルチカラムレイアウトの機能が定義されています。 CSS マルチカラムレイアウトの利用 – ウェブデベロッパーガイド | MDN 例えば下記の例ではp要素にcolumn-countプロパティを設定して、テキストを2段組みで表示させています。 ブロック要素を多段組みすることも可能です。下記の例ではul要素にcolumn-countプロパティを設定して、子のli要素を2段組みしてます。 2段目上部に不可解な余白が ところでブロック要素を多段組みした場合、2段目（以降）の段の上部に不可解な余白が発生することがあります。 検証してみたところ、マルチカラム内部の要素（この例であればli要素）に下方パディング（padding-bottom）が設定されていると発生しました。 解決策 この現象、どうもマルチカラム内部の要素がブロック要素の場合に発生するよ