記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改)

最終更新日:2014-05-30

以前、「記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 –」という記事を書きましたが、欄の間に隙間を作るのに、border を背景と同じ色にするといった力技ではなくて、スマートな方法が分かったので、その覚書です。

display:table を指定している要素に「border-collapse: separate; border-spacing: 10px;」といった感じの記述を追加すると、欄と欄との間にスペースを確保できるようです。

ブログ上での表示は、以下のような感じです。

見出し

本文 本文 本文 本文 本文 本文

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

見出し

本文 本文 本文

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

見出し

本文 本文 本文

見出し

本文 本文 本文

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

見出し

本文 本文 本文

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

続きを読む

#2013