(136) ブロックの隙間にできる謎の空白を削除したい。

投稿者: | 2022年3月26日

80 views

1. 問題発生

divタグを上下に並べて書いた。

上側の divは白い背景で、中に画像を置いた。
下側の divは黒い背景だ。

すると…

両者の間に 謎の余白が出現してしまった…

この余白を消したい!

https://www.dogrow.net/hp/sample/00136/case1

コードは以下の通り。
空白領域など作るつもりはまったくないのだ。

index.html

<html lang="ja">
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="d1"><img src="bg.jpg"></div>
    <div class="d2"></div>
  </body>
</html>

style.css

div.d1{
  background-color: #fff;
}
div.d2{
  background-color: #000;
  height:300px;
}

2. 解決策

上側の divの下端に余白が出来てしまっていた。
これを line-height: 0 で消すことが出来る。
「line-heightとは?」は、こちらを参照されたい。

https://www.dogrow.net/hp/sample/00136/case2

style.css

div.d1{
  background-color: #fff;
  line-height: 0;
}
div.d2{
  background-color: #000;
  height:300px;
}

無理矢理下側の divを margin-top: -10px とかで上に移動させて、強引に消すのはやめたほうがよいかも…


カテゴリー: CSS

コメントを残す

メールアドレスが公開されることはありません。


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)