画像の下に背景色が少し表示されているのをなくしたい

以下のようなHTMLとCSSで構成されたサイトを作成しましたが、
画像の下部分に少し背景色が出てしまっています。

これをなくす方法を教えてください。

デベロッパーツールで見てもマージン、パディングはないようです。

コードを大幅に変更して、右側部分だけに背景色を適用でもいいのですが（というかはじめはそうしようとしたのですが）、
そうすると右側テキストがうまく中央に表示できず、
結局左の画像と右のテキストを包含するdivに背景色をつけて今に至ります。

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4  <!-- Required meta tags -->
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1">
7  <link rel="stylesheet" href="css/style.css">
8  <title>ホームページ</title>
9</head>
10<body>
11
12
13    <div class="top">
14       <div class="top-img-box">
15        <img src="img/topimg1.jpg" alt="" class="top-img">         
16       </div>
17         <h1 class="top-text1">素敵な<br>Website</h1>  
18    </div>
19
20
21 </body>
22</html>
23

css
1* {
2box-sizing: border-box;
3}
4html, body,
5ul, ol, li,
6h1, h2, h3, h4, h5, h6, p, div {
7  margin: 0;
8  padding: 0;
9}
10
11
12.top {
13	display: flex;
14	width: 100%;
15	align-items: center;
16	background-color: #ff9999;
17	padding-bottom: 0;
18}
19
20.top-img {
21	width: 100%;
22}
23
24.top-img-box {
25	width: 65%;
26
27}
28
29.top-text1 {
30	width: 35%;
31	text-align:center;
32	font-size: 25px;
33	letter-spacing: 1px;
34	margin: 0;
35}
36

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

回答1件

ベストアンサー

これではどうでしょう。

CSS
1.top-img {
2    display: block;
3}

投稿2020/03/26 07:52

kei344

総合スコア69458

NAKAZAKI

2020/03/26 08:00

できました！正直、display: block;を足すことの意味がわかっていませんので、もう少し勉強し直さねば！と思いました。回答、ありがとうございました。

kei344

2020/03/26 08:04

原因は img要素はdisplay: inline;なので、テキストのベースラインに並んでいるからです。 vertical-align: bottom; でも多分解決できると思います。

NAKAZAKI

2020/03/26 08:27

なるほど！そういうことなのですね。ありがとうございます。理由がわかり、スッキリしました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

画像の下に背景色が少し表示されているのをなくしたい

関連した質問