画面に変な余白ができてしまうけど、どこで直すかわからない
2025.03.22
画面のどこに余白ができるかによって対応方法が変わってきます。
画像の下に謎の余白ができる
<img>要素を使って画像をそのまま並べると、画像の下に隙間ができてしまうことがあります。これは、<img>要素がinline要素として扱われ、ベースライン (baseline) に合わせて配置されるためです。
解決方法
この問題を解消するには、imgに次のCSSを指定します。
img {
vertical-align: bottom;
}vertical-align: bottom; を指定することで、画像のベースラインではなく下端に合わせて配置され、余計な隙間が解消されます。
注意点
リセットCSS (例: destyle.css など) を使用している場合、この指定がすでに含まれていることがあるため、追加の対応は不要な場合があります。
背景色が途切れて白い余白ができてしまう
Marginの突抜けが起きている可能性があります。
子要素の上下方向にmarginが設定されており、その親要素にpaddingとborderのどちらも設定されていない場合、子要素のmarginが親要素を突き抜けてしまうことがあります。marginが突き抜けていると、親要素の背景色が途切れて白いスペースが見えてしまいます。
親要素の上下方向にpaddingやborderが設定されていれば、それらが壁のように働くので突き抜けは起きません。
解決方法
背景色を保ちつつ余白を減らしたい場合は、親要素のpaddingを無くすのではなく子要素のmarginを消しましょう。
画面の右に余白が開いてしまう
この問題は、配置している要素の横幅が画面幅を超過している場合に発生します。
原因の例
- 画面幅が1000pxの場合に、1200pxの画像が配置されている
- marginやpaddingの設定ミスで、想定より大きな幅が生まれている
解決方法
- 要素の幅 (width) を画面幅以内に収める
- 画像に
width: 100%;を使用し、レスポンシブ対応にする
例:
img {
width: 100%;
height: auto; /* アスペクト比を維持したまま縮小 */
}これにより、画面幅に応じて画像が適切なサイズに縮小され、意図しない余白が解消されます。