重なるmarginの値について

CSS on ,

<div>などでボックスを作って縦でも横でも並べることがコーディング時に多々あると思いますが、その際、並べた両方のボックスで四辺にmarginを指定した場合、隣り合った部分のmarginが片方だけしか反映されません。

例えば、縦に2つ<div>を並べ、その両方にmargin:5px;と指定した場合、上のdivの下辺と下のdivの上辺が隣り合わせになりますが、何も知らずに一般的に考えると、「各divにmargin:5px;を指定してるから、このdivの間には上と下のmarginを足した10pxの隙間ができる」と考えてしまう人が多いと思います。

しかしこの場合、上と下の間に指定されているmarginを足した値ではなく、どちらか一方(正確には値が大きいほう)が適用されるようです。

なので、隣り合うdivの間に一定の間隔を設けたい場合は、marginの仕様上どちらか片方を0px指定にし、もう片方に開けたい隙間分のmarginを指定した方が賢いと言えるでしょう。
今後、万が一ブラウザの仕様変更とかでmarginに対する認識が変わったとしても、見た目は変わりませんので。

コメントを残す