CSS3では、ブロック要素の内部を多段組みで表示するマルチカラムレイアウトの機能が定義されています。

CSS マルチカラムレイアウトの利用 – ウェブデベロッパーガイド | MDN

例えば下記の例ではp要素にcolumn-countプロパティを設定して、テキストを2段組みで表示させています。

ブロック要素を多段組みすることも可能です。下記の例ではul要素にcolumn-countプロパティを設定して、子のli要素を2段組みしてます。

2段目上部に不可解な余白が

ところでブロック要素を多段組みした場合、2段目（以降）の段の上部に不可解な余白が発生することがあります。

検証してみたところ、マルチカラム内部の要素（この例であればli要素）に下方パディング（padding-bottom）が設定されていると発生しました。

解決策

この現象、どうもマルチカラム内部の要素がブロック要素の場合に発生するようです。なので、マルチカラム内部の要素をdisplay: inline-block;にしたら解消しました。ただそれだけだと要素が横に並んでしまうので、width: 100%で実質的にブロック的にし、パディング等の計算が狂わないようにbox-sizingも設定しました。

結果は以下の通り。

2段目上部の余白が無くなりました！

補足

このマルチカラムレイアウト、IEだとバージョン10以降で対応しています。

CSS3 Multiple column layout: Can I use… Support tables for HTML5, CSS3, etc

※「Showing all」をクリックすると細かいバージョン別の対応状況が表示されます。

IE9のような非対応のブラウザではどうなるかというと、単に多段組みではなくなるだけです。情報としては全く欠損しないので、IE9でもIE10以降と全く同じユーザー体験が求められるような場合を除いて、十分採用可能な機能と言えそうです。

ただし、各ブラウザで細かいバグがいろいろあるようです。ごくごくシンプルに使う分には問題なさそうですが、詳細は前述caniuseのページ下部の「Known issues」を参照ください（英文ですが…）。