borderを消すとデザインが崩れる

コーディングするとき、borderを引いて、それをレイアウトの目安にCSSを書くようにしてるの。

でも、作業の終わりが見えてきたからborderを消したら、なぜか一部だけデザインがぐちゃくちゃに崩れてて・・・

ためしに、またborderを付けてみたら、崩れてないんだけど・・・

どうしたらいい？

「marginの相殺」ってやつです。

密接した親要素と子要素ではmarginの効力に違いが出るので、レイアウトによってはこのようなトラブルが起きる場合があります。

positionプロパティを使っていると、出現しやすいです。

解決方法は、親要素と子要素の間に余白を付けること。

「border:1px solid #fff」でも良いですし、「padding:1px」でもOKです。

うまく誤魔化して、余白を付け足してください。