マジレス希望

HTML、CSS、テキストの上下の不明な余白について

解決済

質問者：nraxis
質問日時：2019/05/06 19:38
回答数：2件

以下のコードですが、テキストの上下に余白が出来てしまいます。
Chrome で見ても要素にマージンもパディングも無いのですが、、、。
フォントの余白かと思ったのですが、h1 自体が余白を持っているような気がします。
余白をなくしたいのですが、どのようにすれば良いでしょうか ?

どうぞ、宜しくお願いいたします。

(HTML)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
</head>

<body>

<header>
<h1>ダミーテキスト</h1>
</header>

</body>
</html>

(CSS)
body, h1, h2 {
margin: 0;
}

header {
background-color: rgba(182, 80, 119, 1);
}
header h1 {
color :#ffffff;
font-size: 4rem;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1ベストアンサー

回答者： yambejp
回答日時：2019/05/07 10:05

余白ではなく行の高さでは？

h1, h2 {
line-height:1em;
}

- 0
- 件

通報する

この回答へのお礼

そうですね、その通りでした。
ご回答頂きありがとうございました。

通報する

お礼日時：2019/05/07 15:28

参考程度に

No.2

回答者： gura_
回答日時：2019/05/07 10:27

nraxisさま

>･･････上下に余白が出来てしまい････････････

ご参考に↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<style>
html,body{margin:0;}
header {
background-color: rgba(182, 80, 119, 1);
}
header h1 {
margin:0; line-height:1.0;
color :#ffffff;
font-size: 4rem;
}
</style>
</head>
<body>
<header>
<h1>ダミーテキスト</h1>
次のテキスト
</header>
</body>
</html>