h1とpの間を隙間無く配置したい

Question

<header>
	<h1><img src="images/sp_keyvisual.png" alt="キービジュアル"></h1>
	<p><marquee>オススメ！</marquee></p>
</header>

/*style.css*/
header h1 img{
	width: 100%;
	margin-bottom: 0;
}

header p{
	height: 40px;
	background-color: #e65d01;
	line-height: 40px;
	font-size: 0.9em;
	color: #FFF;
	font-weight: bold;
}

/*reset.css*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

目的はタイトルの通りなのですが、正確には、デベロッパーツールで確認するとh1とimgのbottomに隙間が発生しています（h1とimgの高さが異なります）。
reset.cssでh1のpaddingはリセットしており、h1とimgのbottomに発生している隙間はpaddingとして認識はされておりません。
解る方いらっしゃいましたら教えて頂けると幸いです。

Comments

[mather]

aliではなくaltですね。
また、HTML部分は実際は<header>タグで囲まれているのですか？

[y_shigoto]

タイプミスです。ご指摘ありがとうございます。
<header>で囲んでいます。
すみません、htmlソースもここから記載すべきでしたね。

[mather]

質問は再編集できるので修正するべきだと思います。

[y_shigoto]

編集機能を存じ上げませんでした。
ご指摘ありがとうございます。

[masshu]

header p のline-heightが悪さしてません？

[y_shigoto]

header p :line-heightを無効化しても変化ありませんでした。
前述の通りh1とimgの高さが異なっていたので、問題はh1かimgにありそうかと思うのですが…
ご回答ありがとうございます。

Answer 1

こちらですね。
https://technical-creator.com/img-tag-vertical-align/

<h1><img src="images/sp_keyvisual.png" alt="キービジュアル">ggg</h1>

のようにベースラインの下にはみ出る文字を入れてみるとわかります。

Comments

[y_shigoto]

解決しました！送って頂いた記事もとても解りやすい解説で納得できました。
本当にありがとうございました！

Answer 2

とりあえずcssの指定に単位がないものが見受けられますので
0→0pxとしてください

Comments

[maisumakun]

長さについて、「0」だけは単位がなくても問題なく処理されます。

https://developer.mozilla.org/ja/docs/Web/CSS/Length#Syntax

[y_shigoto]

0の場合単位は省略できると学習・認識していた為省いていました。
公の場で質問する際は可能な限り省略せずに掲載するよう努めます。
ご指摘ありがとうございました。