3. 隣り合うボックス同士の間隔を調整する
ボックス間の上下左右の間隔を調整するには、ボックスのマージン(=外側の余白)量を指定します。以下のようにスタイルシートを追記します。div.imagebox { border: 1px dashed #0000cc; /* 枠線 */ background-color: #eeeeff; /* 背景色 */ width: 130px; /* 横幅 */ float: left; /* 左に配置 */ margin: 5px; /* 周囲の余白 */ }「margin」プロパティは「外側の余白」を指定するプロパティです。値として「5px」を指定すれば、周囲(上下左右それぞれ)に5ピクセルの余白が設けられます。このスタイルシートを使って表示させると、下図のように見えます。ここでは、ボックスを4つ掲載しています。実際にブラウザで表示を確認するには、サンプルページ4をご覧下さい。
これで、隣り合うボックス同士に適度な間隔が空き、見やすくなりました。
画像群の末尾で、後続の文章が回り込んでしまう
「float」プロパティを使ってボックスを左へ寄せているため、このままだと、下図のように画像群の後に続く文章も、画像の右側に回り込んでしまいます。実際にブラウザで表示を確認するには、サンプルページ5をご覧下さい。このような表示になるのを防ぐには、末尾に「回り込みを解除する記述」を加えておく必要があります。最後に、ボックス群の末尾で回り込みを解除する方法をご紹介いたします。