385 views
この記事は最終更新から 929日 が経過しています。
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 とかで上に移動させて、強引に消すのはやめたほうがよいかも…