画像下の余白がvertical-align:bottom;でも消えない

3つ並んでいる画像下の余白がvertical-align:bottom;でも消えません。

どんな原因が考えられるでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="style.css" type="text/css">
7
8    <title>蒼乃建設</title>
9</head>
10<body>
11   <header>
12        <div id="header" class="wrapper1">
13            <div class="page-header"><!-- wrapperの中をさらに小さく余白 -->
14                <div class="yokonarabi"><!-- navを横並びにするため -->
15                    <a href="#"><img src="img/header_logo.png" alt="ヘッダーロゴ" class="logo"></a>
16                    <nav>
17                        <ul class="main-nav">
18                            <li><a href="#">企業理念</li></a>
19                            <li><a href="#">施工事例</li></a>
20                            <li><a href="#">採用情報</li></a>
21                            <li><a href="#">お問い合わせ</li></a>
22                        </ul>
23                    </nav>
24                </div>
25            </div>
26        
27        <h1>街を作る。未来を作る。</h1>
28        </div>
29    </header>
30
31    <div class="osirase-wrapper">
32        
33        <h2 class="title-osirase">お知らせ</h2>
34            <ul class="news-list">
35                <li><a href="#"><span class="news-list__block">2020.11.17<span class="news-list__border">お知らせ</span></span>本社打合せ室が完成しました。</a></li>
36                <li><a href="#"><span class="news-list__block">2020.11.10<span class="news-list__border">お知らせ</span></span>【メディア掲載】住宅雑誌 2020年11月号</a></li>
37                <li><a href="#"><span class="news-list__block">2020.11.01<span class="news-list__border">お知らせ</span></span>ホームページが完成しました。</a></li>
38            </ul>
39
40            </div>
41    </div>
42    
43   <!-- 施工事例 -->
44   <section class="case">
45    <h2 class="case-title">施工事例</h2>
46    <div class="flexbox">
47      <section class="case-content">
48        <p class="case-content__img"><img src="img/building1.png" alt="M様邸新築工事"></p>
49        <h3 class="case-content__title">M様邸新築工事</h3>
50        <p class="case-content__text">埼玉県</p>
51        <a href="#" class="case-content__btn"><img src="img/more.png" alt="詳細を見る"></a>
52      </section>
53      <section class="case-content">
54        <p class="case-content__img"><img src="img/building2.png" alt="スカイビル"></p>
55        <h3 class="case-content__title">スカイビル</h3>
56        <p class="case-content__text">東京都</p>
57        <a href="#" class="case-content__btn"><img src="img/more.png" alt="詳細を見る" class="case-content__img"></a>
58      </section>
59    </div>
60    <p class="case-btn"><a href="#">施工実績一覧</a></p>
61  </section>
62
63    <section class="saiyou">
64
65        <a href="#"><img class="saigo" src="img/company.png" alt="企業"></a>
66        <a href="#"><img class="saigo" src="img/recruit.png" alt="採用"></a>
67        <a href="#"><img class="saigo" src="img/contact.png" alt="問い合わせ"></a>
68
69
70    </section>
71    <footer>
72        <div id="footer" class="wrapper3">
73            <div class="page-header"><!-- wrapperの中をさらに小さく余白 -->
74                <div class="yokonarabi"><!-- navを横並びにするため -->
75                    <a href="#"><img src="img/footer_logo.png" alt="ヘッダーロゴ" class="logo"></a>
76                    <nav>
77                        <ul class="main-nav">
78                            <li><a href="#">企業理念</li></a>
79                            <li><a href="#">施工事例</li></a>
80                            <li><a href="#">採用情報</li></a>
81                            <li><a href="#">お問い合わせ</li></a>
82                        </ul>
83                    </nav>
84                </div>
85            </div>
86        
87        </div>
88    
89    Copyright © 2020 Aono Corporation.
90        </div>
91    </footer>
92</body>
93</html>

CSS
1@charset "UTF-8" ;
2
3/* ========================================
4	    リセットcss
5	========================================= */
6	html, body, div, span, applet, object, iframe,
7	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8	a, abbr, acronym, address, big, cite, code,
9	del, dfn, em, img, ins, kbd, q, s, samp,
10	small, strike, strong, sub, sup, tt, var,
11	b, u, i, center,
12	dl, dt, dd, ol, ul, li,
13	fieldset, form, label, legend,
14	table, caption, tbody, tfoot, thead, tr, th, td,
15	article, aside, canvas, details, embed,
16	figure, figcaption, footer, header, hgroup,
17	menu, nav, output, ruby, section, summary,
18	time, mark, audio, video {
19		margin: 0;
20		padding: 0;
21		border: 0;
22		font-style:normal;
23		font-weight: normal;
24		font-size: 100%;
25		vertical-align: baseline;
26	}
27	article, aside, details, figcaption, figure,
28	footer, header, hgroup, menu, nav, section {
29		display: block;
30	}
31	html{overflow-y: scroll;}
32	blockquote, q {quotes: none;}
33	blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
34	input, textarea,{margin: 0; padding: 0;}
35	ol, ul{list-style:none;}
36	table{border-collapse: collapse; border-spacing:0;}
37	caption, th{text-align: left;}
38    a:focus {outline:none;}
39
40
41        	/* ========================================
42		共通
43    ========================================= */
44	
45	a{
46		text-decoration: none;
47		color: black;
48	}
49    body{
50        font-family: "Hiragino Mincho ProN", "Yu Mincho Light", YuMincho, "Yu Mincho";
51    }
52    
53    	/* ========================================
54		ヘッダー
55	========================================= */
56	
57	#header{
58		background-image: url(img/main.png);
59		min-height: 80vh;
60	}
61
62	.wrapper1{
63		background-size: cover;
64		background-position: center top;
65		background-repeat: no-repeat;
66		height: 80vh;
67	}
68	
69	.logo{
70		width: 130px;
71		height: 55px;
72	}
73
74	.yokonarabi{
75		display:flex;align-items: center;
76		justify-content: space-between;
77	}
78
79	.page-header{
80		width: 1110px;
81		height: auto;
82		margin: 0 auto;
83		padding-top: 25px;
84	}
85
86	.main-nav{
87		display: flex;
88	}
89
90	.main-nav li{
91		margin-left: 60px;
92	}
93
94	.main-nav a{
95		color: black;
96	}
97
98	h1{
99		font-size: 48px;
100		text-align: center;
101		line-height: 70vh;
102	}
103
104		/* ========================================
105		おしらせ
106	========================================= */
107
108
109	.osirase-wrapper{
110		width: 100%;
111		height: 500px;
112	}
113
114	h2{
115		font-size: 38px;
116		text-align: center;
117		padding-top: 90px;
118	}
119
120	.news-list{
121		display: block;
122		width: 700px;
123		height: auto;
124		margin: 0 auto;
125		margin-top: 60px;
126
127	}
128
129	.news-list li{
130		border-bottom: solid 1px #000;
131		line-height: 85px;
132	}
133
134	.news-list__border{
135		margin-left: 30px;
136		margin-right: 30px;
137		border: 1px solid #000;
138		font-size: 11px;
139		padding: 7px;
140	}
141
142	.news-list__block{
143		font-size: 18px;
144	}
145
146	.news-list a{
147		font-size: 18px;
148		display: block;
149	}
150
151
152			/* ========================================
153		施工事例
154	========================================= */
155
156	.case{
157		max-width: 1100px;
158		margin: 0 auto;
159	}
160
161	.case-title{
162		text-align: center;
163		padding-bottom: 90px;
164	}
165
166	.flexbox{
167		display: flex;
168	}
169
170	.case-content{
171		width: 100%;
172		text-align: center;
173	}
174
175	.case-content__img img{
176		max-width: 430px;
177		margin: 0 auto;
178	}
179
180	.case-content__title{
181		margin-top: 20px;
182		margin-bottom: 15px;
183		font-size: 24px;
184	}
185
186	.case-content__text{
187		font-size: 14px;
188		margin-bottom: 20px;
189	}
190
191	.case-content__btn img{
192			width: 300px;
193	}
194
195	.case-btn a{
196		font-size: 20px;
197		width: 200px;
198		border: 1px solid #000;
199		text-align: center;
200		padding: 12px 40px;
201	}
202
203	.case-btn{
204		text-align: center;
205		margin-top: 78px;
206	}
207
208
209			/* ========================================
210		採用情報
211	========================================= */
212
213	.saiyou{
214		display: flex;
215		margin-top: 180px;
216	}
217
218	.saigo{
219		width: 100%;
220		height: auto;
221		
222	}
223
224	.saigo img{
225		width: 450px;
226		height: 450px;
227		vertical-align:bottom;
228	}
229
230	
231
232
233			/* ========================================
234		フッター
235	========================================= */
236
237
238	#footer{
239		background-color: #000;
240		height: auto;
241	}
242
243	
244	.logo{
245		width: 130px;
246		height: 55px;
247	}
248
249	.yokonarabi{
250		display:flex;align-items: center;
251		justify-content: space-between;
252	}
253
254	.page-header{
255		width: 1110px;
256		height: auto;
257		margin: 0 auto;
258	}
259
260	.main-nav{
261		display: flex;
262	}
263
264	.main-nav li{
265		margin-left: 60px;
266	}
267
268	.main-nav a{
269		color:#fff;
270	}
271
272	h1{
273		font-size: 48px;
274		text-align: center;
275	}

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

回答1件

ベストアンサー

下記のCSSは効いてません。

css
1    .saigo img{
2        width: 450px;
3        height: 450px;
4        vertical-align:bottom;
5    }

.saigo imgというのはsaigoクラスの子孫要素のimgという意味になりますが、そのようなものはないので。
img自体にsaigoクラスが付与されてますので、下記のCSSになります。

css
1    img.saigo {
2        width: 450px;
3        height: 450px;
4        vertical-align:bottom;
5    }

これで余白はなくなりますがサイズが絶対値で固定というのは、現在のWEBサイト設計としては疑問です。
せっかくflexを使っているので、相対値で指定してレスポンシプ対応にしたほうがいいでしょう。

投稿2020/12/15 07:11

hatena19

総合スコア34073

mmmin

2020/12/15 07:26

余白なくなりました！プログラミングを始めたばかりでして、とても勉強になります。ありがとうございました！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

画像下の余白がvertical-align:bottom;でも消えない

関連した質問