ここから本文です

HTML&CSSについて質問です。

アバター

ID非公開さん

2019/5/1921:49:56

HTML&CSSについて質問です。

レスポンシブに対応させようとしているところで、画像の下に小さな余白ができます。
marginもpaddingも指定していないので原因がわかりません…
余白が出るのは小さな画面のときだけです。
これはなんなのでしょうか?

ちなみにどの部分を切り取ればいいのかわからなかったので、コードがかなり長くなりましたこと申し訳ありませんがお付き合いください。
あと、添付画像のテキストは文字数のため変更してあります。


<div class="contents">
<dl class="contents-list">
<dt class="contents-list-img"><img src="images/item1.jpg"></dt>
<dd class="contents-list-text">
<h3 class="contents-list-title">1.テスト</h3>
<p class="contents-list-dsc">テスト</p>
</dd>
</dl>
<dl class="contents-list">
<dt class="contents-list-img"><img src="images/item2.jpg"></dt>
<dd class="contents-list-text">
<h3 class="contents-list-title">2.テスト</h3>
<p class="contents-list-dsc">テスト</p>
</dd>
</dl>
<dl class="contents-list">
<dt class="contents-list-img"><img src="images/item3.jpg"></dt>
<dd class="contents-list-text">
<h3 class="contents-list-title">3.テスト</h3>
<p class="contents-list-dsc">テスト</p>
</dd>
</dl>
</div>

* {
margin: 0 0;
padding: 0 0;
box-sizing: border-box;
}

.contents-list {
display: flex;
width: 100%;
}
.contents-list:nth-child(even) {
flex-direction: row-reverse;
}
.contents-list-img {
width: 50%;
}
.contents-list-img img {
width: 100%;
height: 100%;
}
.contents-list-text {
width: 50%;
padding: 20px 100px 20px 20px;
background-color: #c2c2c2;
color: #fff;
}
.contents-list-title {
margin-bottom: 20px;
font-weight: 400;
}
.contents-list-dsc {
font-size: 14px;
}


@media screen and (max-width:600px) {
.contents-list {
flex-direction: column;
}
.contents-list:nth-child(even) {
flex-direction: column;
}
.contents-list-img {
width: 100%;
}
.contents-list-text {
width: 100%;
padding: 18px;
}
}

flex-direction,h3 class,dt class,dl class,dd class,display,block

閲覧数:
9
回答数:
1

違反報告

ベストアンサーに選ばれた回答

scarさん

2019/5/1922:47:45

display: block; を下記のように入れてください。
そうすれば余白はなくなります。

.contents-list-img img {
width: 100%;
height: 100%;
display: block;
}

アバター

質問した人からのコメント

2019/5/19 23:57:11

imgがインライン要素だからだったんですね!
とてもいいことを学びました!
ご回答ありがとうございました。

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる