【CSS】横並び(float)したブロック要素のマージン(margin)を指定する方法上の画像のように、divなどのブロック要素の中に子要素を横並び(float)で表示させたいときに便利な方法。 この例では、幅150px、高さ100pxのdiv要素をマージン20pxで横に3つ並べています。 こういう場合、子要素の右と下にマージンを指定するのが一般的だと思います。 しかしこれだと、一番右端の子要素マージンの分だけ親要素より幅が大きくなるため、3番目の子要素が下に回りこんでしまいます。 3番目、6番目の子要素に別のクラス名をつけてスタイルを「margin-right:0;」と指定すれば意図した表示にはなりますが、結構めんどくさいですし、今後さらにに子要素を追加したり、並べ替えたりするときのことを考えるとできれば一括で指定したいところです。 ということで、子要素の3の倍数番目(3個、6個、9個、･･･)の右マージンを0して、親要素にピッタリはめてやります。 サンプルコード HTM
