スライドショーの画像上部の余白を消したいです。

前提・実現したいこと

HTML, CSSを使用してスライドショーを作成しましたが、画像の上の部分に細い余白ができてしまいます。この余白を消す方法はありますでしょうか。
初心者で分からない事だらけです。ご教授頂けたら幸いです。

発生している問題・エラーメッセージ

画像の上に細い余白が発生する。

該当のソースコード

html
1<header></header>
2		
3<main>
4	<div class="slide">
5		<img src=""> <!-- 縦横比9:16の画像を使用しています -->
6		<img src="">
7		<img src="">
8	</div>
9</main>

CSS
1header {
2  height: 10px;
3  background-color: black; /* headerの値に大きな意味はありません。 */
4}
5
6.slide {
7  position: relative;
8  overflow: hidden;
9  text-align: center;
10  margin-left: auto;
11  margin-right: auto;
12  width: 800px; /* 縦横比9:16の画像を使用しています */
13  height: 450px;
14}
15
16.slide img {
17  position: absolute;
18  vertical-align: bottom;
19  top: 50%;
20  left: 50%;
21  transform: translate(-50%, -50%);
22  width: 800px;
23  height: 100%;
24  opacity: 0;
25  animation :slideshow 18s linear infinite;
26}
27
28@keyframes slideshow{
290%{
30  opacity: 0;
31}
32
3310%{
34  opacity: 1;
35}
36
3728%{
38  opacity: 1
39}
40
4138%{
42  opacity: 0;
43}
44
45100%{
46  opacity: 0;
47}
48}
49 
50.slide img:nth-child(2){
51  animation-delay: 6s;
52}
53 
54.slide img:last-child{
55  animation-delay: 12s;
56}

試したこと

imgタグに

margin: 0;
padding: 0;
vertical-align: bottom;
display: block;

などを試しましたが解決しませんでした。

補足情報（FW/ツールのバージョンなど）

なし

mai1210

2021/03/17 09:00

こんにちは。質問内のコードで「画像の上に細い余白」が再現できませんでした。画面の左右＆最上部・最下部に余白ができるようであれば、bodyに付いているブラウザ標準の余白だと思いますので、bodyに対してmargin: 0;かけてあげてください。

K0k

2021/03/17 09:09

ご返信ありがとうございます！キャプチャ画像を追加しました。 headerと画像の間にある細い余白ができてしまします。ちなみにbodyの周りの余白の事ではないです。ご教授頂けたら幸いです。

mai1210

2021/03/17 09:27 編集

指している箇所を勘違いしておりました、すみません！headerと画像の間、ですね。考えられるとしたら・画像自体の上部に白い部分がある（画像を要調整）・何かしらのborderがついている？等でしょうか。。。

K0k

2021/03/17 13:23

いえいえ！！考えて下さって、ありがとうございます。真っ黒な画像に差し替えてみましたが、上部の余白は表示されたままですね。また、imgタグのborderを0にしてみましたが、結果は変わらずです。一つ気付いたのですが、ページの拡大率を変えると余白が消えることがある様です。

K0k

2021/03/17 13:27

なお、二枚目の写真は、見やすいようにheaderの高さを高くしています。

Lhankor_Mhy

2021/03/18 01:38

ズームレベルはどうなっていますか？

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

回答1件

ベストアンサー

ちょっと色的にアレだけども…
僕が試した環境では再現できませんでした。
ブラウザの拡大率を上下させると、小数点以下が上手く描画できず、
細い線みたいに見えることがあります。

キャプチャ画像が欲しいかも？

拡大率250%の画像※色は例によってアレです

投稿2021/03/17 08:33

編集2021/03/17 09:34

退会済みユーザー

総合スコア0

K0k

2021/03/17 09:10

ご返信ありがとうございます！キャプチャ画像を追加しました。 headerと画像の間にある細い余白ができてしまします。ご教授頂けたら幸いです。

退会済みユーザー

2021/03/17 09:33

キャプチャ画像ありがとうございます！隙間の狭さを見るにborderが0.5pxくらいで当たっているのかと思ったんですが… そちらよりも先に「画像自体の上の部分がにじんでいないか？」確認していただけますでしょうか。あとは、完全に真黒な画像を用意して頂いて、 headerとの間に隙間ができるか確認して頂きたいです。 ※画像をトリミング等する際に、端っこが小数点以下になり、色の振り分け処理でにじむことがあります。あとは念のためにブラウザの拡大率をご確認ください。拡大率250％で確認した時の画像を追加しておきます。

K0k

2021/03/17 13:24

ご回答ありがとうございます！！真っ黒な画像に差し替えてみましたが、上部の余白は表示されたままですね。また、imgタグのborderを0にしてみましたが、結果は変わらずです。一つ気付いたのですが、ページの拡大率を変えると余白が消えることがある様です。

K0k

2021/03/17 13:27

なお、二枚目に追加した写真は、見やすいようにheaderの高さを高くしています。

退会済みユーザー

2021/03/18 00:46 編集

> K0k様 > 一つ気付いたのですが、ページの拡大率を変えると余白が消えることがある様です。質問への追記・修正にこのように書かれておられますが、僕の回答を今一度ご確認いただけますでしょうか。「ブラウザが描画できない＝仕様」になります。

K0k

2021/03/18 03:18

ご回答ありがとうございます! なるほど。ブラウザの拡大率によって発生してしまうもこなのですね。理解が遅くて申し訳ございません。ご回答、ありがとうございました!!