画像とdivタグの間を詰めるにはどうすればよろしいでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="style.css">
6    <title>Document</title>
7</head>
8<body>
9    <p><img src="images/album.png"></p>
10    <div>
11    </div>
12</body>
13</html>

CSS
1* {
2    margin: 0;
3    padding: 0;
4}
5
6div {
7    width: 960px;
8    height: 60px;
9    background-color: pink;
10}

上記のコードをブラウザで表示すると下記の画像のようになります。

ALBUMLISTと書かれた画像とdivタグの範囲であるピンクとの部分の間に白い余白があるのですが、これを詰めるにはどうすればよろしいでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

pタグの初期値で上下にmargin 1remずつ入っているので、
p{margin:0;}を入れる、もしくはimageタグについているpタグを外すと余白がなくなると思います。

参考:https://vanillaice000.blog.fc2.com/blog-entry-518.html

投稿2021/08/04 12:44

jun26

総合スコア191

itagagaki

2021/08/04 14:58

* { margin: 0; padding: 0; } がすでに設定されているので、さらに p{margin:0;} を設定しても意味がありません。ここでの余白の原因はpのmarginではありません。

jun26

2021/08/04 15:43

すみません、見落としてました。 itagagakiさんの言う通りで、全称セレクタでmargin:0;がついているため、pタグのmarginの設定は意味なかったです。訂正を兼ねて、別回答として img { display: block; }でも解決するようです。余白ができる原因について記事がありましたので、参考で載せておきます。参考:http://ideahacker.net/2013/12/03/6983/

行動規範の内容に同意します

p {line-height: 0;}を入れるといいです。

投稿2021/08/04 12:35

itagagaki

総合スコア8402

kirakira3003

2021/08/08 12:29

pに対してline-height: 0;をするとどうして空白が無くなるのでしょうか？

itagagaki

2021/08/08 12:51 編集

pはブロックレベル要素です。ブロックレベル要素のline-heightプロパティは、要素に含まれる行ボックスの最小の高さを指定します。 https://developer.mozilla.org/ja/docs/Web/CSS/line-height つまりline-heightの値によってpの＊最小の高さ＊が計算されるということですね。

行動規範の内容に同意します

あなたの回答