【html】floatで回り込みをさせた画像の真下に文字を挿入する方法

現在プログラミングスクールの課題で、webサイトを作成しているのですが、どうしてもできないことがありご質問させて頂きました。
以下の画像のように、画像を横並びにし、その真下に画像の説明のような形で文字を配置したいのですが、「li」要素の中に「p」タグを入れ、floatさせた場合、画像の下に文字は配置されるのですが、画像と文字の間にスペースができてしまい、ピッタリと真下に配置することができません...

以下は自分の作成したコードになります。

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>CookCamp</title>
6        <link rel="stylesheet" href="cookcamp.css">
7    </head>
8    <body>  
9        <header class="header_contents">
10            <img src="images/structure/logo.png" class="header_image">
11            <form action="#" class="top_form">
12                <input type="text" name="recipe" placeholder="料理名・食材名で検索">
13                <input type="submit" value="レシピ検索">
14            </form>
15            <p class="top_sentense">誰でも作れる簡単料理レシピ掲載サイト</p> 
16            
17            <ul class="header_list clearfix">
18                <li><a href="#">新着レシピ</a></li>
19                <li><a href="#">料理から検索</a></li>
20                <li><a href="#">食材から検索</a></li>
21                <li><a href="#">旬の料理特集</a></li>
22                <li><a href="#">ランキング</a></li>
23            </ul>
24        </header>
25        
26        <div class="wrapper">
27            
28            <div class="mainView">
29                <img src="images/contents/mainView.jpg" alt="main画像" class="main_imge" >
30            </div>
31            
32            <div class="main_contents clearfix">
33                
34                <nav>
35                    <div class="recipe_link">
36                        <div class="top_recipe_list">
37                            
38                            <div class="top_recepi_title">
39                                <img src="images/icon/dish.png"><p>料理別レシピ</p>
40                            </div>
41                            <ul>
42                                <li><a href="#"><img src="images/icon/arrow.png"><p>和食</p></a></li>
43                                <li><a href="#"><img src="images/icon/arrow.png"><p>イタリアン</p></a></li>
44                                <li><a href="#"><img src="images/icon/arrow.png"><p>フレンチ</p></a></li>
45                                <li><a href="#"><img src="images/icon/arrow.png"><p>中華</p></a></li>
46                                <li><a href="#"><img src="images/icon/arrow.png"><p>アジアン</p></a></li>
47                                <li><a href="#"><img src="images/icon/arrow.png"><p>エスニック</p></a></li>
48                                <li><a href="#"><img src="images/icon/arrow.png"><p>鍋</p></a></li>
49                                <li><a href="#"><img src="images/icon/arrow.png"><p>デザート</p></a></li>
50                            </ul> 
51                        </div>
52                        
53                        <div class="under_recipe_list">
54                            <div class="top_recepi_title">
55                                <img src="images/icon/dish.png"><p>目的別レシピ</p>
56                            </div>
57                            
58                            <ul>
59                                <li><a href="#"><img src="images/icon/arrow.png"><p>お弁当</p></a></li>
60                                <li><a href="#"><img src="images/icon/arrow.png"><p>簡単おかず</p></a></li>
61                                <li><a href="#"><img src="images/icon/arrow.png"><p>ダイエット</p></a></li>
62                                <li><a href="#"><img src="images/icon/arrow.png"><p>ベビーフード</p></a></li>
63                                <li><a href="#"><img src="images/icon/arrow.png"><p>節約食材</p></a></li>
64                                <li><a href="#"><img src="images/icon/arrow.png"><p>アレルギー</p></a></li>
65                                <li><a href="#"><img src="images/icon/arrow.png"><p>シニア料理</p></a></li>
66                            </ul>
67                        </div>
68                    </div>
69                </nav>
70                
71                <div class="new_recipe clearfix">
72                    <div class="new_recipe_title">
73                        <img src="images/icon/dish.png"><p>新着レシピ</p>                        
74                    </div>
75                    <ul class="clearfix">
76                        <li><img src="images/contents/newRecipes1.jpg"><p>季節菜の野菜</p></li>
77                        <li><img src="images/contents/newRecipes2.jpg"><p>ヘルシースープ</p></li>
78                        <li><img src="images/contents/newRecipes3.jpg"></li>
79                        <li><img src="images/contents/newRecipes4.jpg"></li>
80                        <li><img src="images/contents/newRecipes5.jpg"></li>
81                    </ul>
82                    
83                    
84                </div>
85            </div>
86            <footer>
87                
88            </footer>
89        </div> 
90    </body>
91</html>

css
1div, .recipe_link,a,body,p,ul,li{
2    margin:0;
3    padding:0;
4}
5
6.clearfix:after{
7     content:"";
8     display:block;
9     clear:both;
10}
11.header_contents{
12     width:960px;
13     margin:0 auto;
14     border-bottom:solid 1px #BBBBBB;
15     background-color:#FFFFFF;
16}
17.header_image{
18     float:left;
19}
20.top_form{
21     float:right;
22}
23.top_sentense{
24     color:#664433;
25     clear:both;
26}
27.header_contents ul{
28     list-style:none;
29}
30.header_contents ul li {
31     float:left;
32     border-left:solid 1px #BBBBBB;
33     box-sizing:border-box;
34     width:20%;
35     text-align:center;
36     
37}
38
39.header_contents ul li:first-child{
40     border-left:none;
41}
42.header_contents ul li a{
43     text-decoration:none;
44     color:#664433;
45}
46.header_contents ul li a:hover{
47     color:#FF6633;
48}
49
50
51
52.wrapper{
53     background-color:#f5f5dd;
54}
55
56.main_imge{
57     display:block;
58     width:960px;
59     margin:0 auto;
60}
61.main_contents{
62     
63     width:960px;
64     margin:0 auto;
65     
66}
67
68nav{
69     width:200px;
70     margin-top:20px;
71}
72
73
74.recipe_link{
75     width:200px;
76     margin:0 auto;
77     float:left;
78}
79.top_recipe_list{
80     background-color:#FFFFFF;
81     padding:12px 12px 12px 6px;
82}
83.top_recipe_list p{
84     margin-left:7px;
85}
86.under_recipe_list p{
87     margin-left:7px;
88}
89.top_recepi_title{
90     width:160px;
91     background-color:#00CC00	;
92     padding-top:4px;
93     padding-left:4px;
94     border-radius: 20px;
95     margin-bottom:7px;
96}
97
98.top_recipe_title ul{
99     clear:both;
100}
101.top_recepi_title img{
102     margin-left:10px;
103}
104.under_recipe_list ul li img{
105     margin-left:5px;
106}
107.top_recipe_list ul li{
108     
109     border-bottom:dashed 1px #BBBBBB;
110}
111.under_recipe_list {
112     background-color:#FFFFFF;
113     margin-top:15px;
114}
115.under_recipe_list ul li{
116     border-bottom:dashed 1px #BBBBBB;
117}
118
119
120.top_recepi_title p{
121     color:#FFFFFF;
122     display: inline;
123     margin-left:5px;
124}
125
126.under_recipe_list .top_recepi_titile p{
127     display:inline;
128}
129
130.recipe_link ul li{
131     list-style:none;
132     
133}
134.top_recipe_list ul li:last-child{
135     
136     border:none;
137}
138
139.under_recipe_list ul li:last-child{
140     
141     border:none;
142}
143.recipe_link a {
144     text-decoration:none;
145     color:#000000;
146}
147.recipe_link a:hover{
148     color: #FF6928;     
149}
150.recipe_link ul li p{
151     
152     display:inline;
153}
154
155.new_recipe_title{
156     background-color:#00CC00;
157     width:445px;
158     margin-left:7px;
159     border-radius:20px;
160     margin-top:11px;
161     padding-top:5px;
162     
163}
164.new_recipe_title p{
165     margin-left:8px;
166     display: inline;
167}
168.new_recipe_title img{
169     margin-left:12px;
170}
171.new_recipe{
172     background-color:#FFFFFF;
173     width:490px;
174     float:left;
175     margin-left:12px;
176     height:150px;
177}
178.new_recipe li{
179     list-style:none;
180     float:left;
181     margin:7px;
182}
183.new_recipe li p{
184 font-size:11px;
185}
186.new_recipe list:first-child{
187     margin-left:14px;
188}
189
190コード

以下は実行画面の画像になります。

コードが長くなってしまい申し訳ありません...
どなたか教えてくださる方いましたら、よろしくお願いいたします。

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

回答1件

ベストアンサー

まず.new_recipeのheight: 150pxは削除して高さ成り行きにした上で、
画像とpタグの間の隙間はおそらくline-heightの影響だと思われるので、
.new_recipe liにline-height: 0;とか設定してみてはいかがでしょう？

投稿2018/07/16 03:46

aKusano

総合スコア3763

newyee

2018/07/16 06:09

ご回答いただきありがとうございます。教えてくださったようにやってみましたら、一発で解決いたしました。 .new_recipeの「height」を設定していたのですが、それをとっぱらったことで、「li」要素の中にある「p」要素の文字がnew_recipeの中に収まり、さらにline-heightを設定したことで、余白を詰めることができました。そもそもずっと余白を詰める方法は、marginやpaddingを設定しなければならないと思っていたので、こんな方法があるのだと恥ずかしながらビックリしました... 実は、今回の質問とは別の部分なのですが、質問させて頂いた際に貼った画像の中で、どうしても1枚目の完成画像のようにいかない部分がありまして... ここで、お聞きしてもよろしいでしょうか...?