flexで横並びにしたimgの間にマージンを無くしたい

kizau-containerをflexで横並びにしています。
隙間を無くすためにした設定、kizau-container　margin:0　kizau-container img　margin: 0　hanana　margin: 0　
hanana img　margin: 0　padding: 0　hananana img　margin-left: 0　全て記述していますが適応されません。
ご助言お願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="description" content="">
6<link href="../css/reset.css" rel="stylesheet" type="text/css" madia="screen">
7<link href="../css/style.css"rel="stylesheet" type="text/css" madia="screen">
8<link href="../css/machine.css" rel="stylesheet" type="text/css" madia="screen">
9<link rel="shortcut icon" href="/favicon.ico">
10<meta name="viewport" content="width=device-width,initial-scale=1.0">
11<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
12<title>******┃*****</title>
13</head>
14<body>
15	<div class="wrapper01">
16	<header>
17		<!-- header-->
18		<div class="headline">
19		<a href="#"><img src="images/rogo.svg" alt=""></a>
20		<p class="syamei">******</p>
21		</div>
22		<nav class="main-nav">
23		<ul class="nav-list">
24			<li class="top-nav"><a href="#">HOME</a></li>
25			<li class="top-nav"><a href="#">会社概要</a>
26				<ul>
27					<li><a href="#">会社沿革</a></li>
28					<li><a href="#">会社理念</a></li>
29					<li><a href="#">事業案内</a></li>
30				</ul>
31			</li>
32			<li class="top-nav"><a href="#">お問い合わせ</a></li>
33			<li class="top-nav"><a href="#">よくある質問</a></li>
34			<li class="top-nav"><a href="#">採用</a></li>
35		</ul>
36	</nav>
37	</header>
38			<main>
39				<ol class="breadcrumb">
40					<li><a href="#">HOME</a></li>
41					<li><a href="#">**********</a></li>
42				</ol>
43				<h1 class="for">*************</h1>
44				<div class="info-container">
45					<div class="car-container">
46					<img class="info1" src="images/car.jpg" alt="">
47				</div>
48				<div class="ryouri-container">
49					<img class="net" src="images/beef-balls-2426890_640.jpg" alt="">
50				</div>
51				</div>
52					<h2 class="infor">*********************<br>*******************</h2>
53					<h2 class="syousai">********</h2>
54						<div class="kizau-container">
55							<div class="hananana">
56					<a href="#"><img class="oki" src="images/car5.jpg" alt=""></a>
57						<h2 class="zyouhou"><a href="#">&lt;******&gt;</a></h2>
58						<p>・*****************</p>
59					</div>
60					<div class="hanana">
61					<a href="#"><img class="hoken" src="images/riteliru.jpg" alt=""></a>
62						<h2 class="cons"><a href="#">&lt;*******&gt;</a></h2>
63						<p class="kokowa">・*********************</p>
64				</div>
65			</div>
66			<div class="betu-company">
67					<ul>
68						<li><a href="#">***************</a></li>
69						<li><a href="#">***************</a></li>
70					</ul>
71				</div>
72<div class="sitagazou">
73<img class="footerue" src="images/image1.jpg" alt="">
74<p>～***********～</p>
75</div>
76			</main>
77	<div class="bottom">
78<!--footer-->
79	<footer>
80		<ul class="footer-nav">
81			<li class="footer-nav1"><a href="#">HOME</a></li>
82			<li>
83		<ul class="footer-nav1">
84			<li class="niretu"><a href="#">会社概要</a></li>
85			<ll class="niretu"><a href="#">会社沿革</a></ll>
86			<li class="niretu"><a href="#">経営理念</a></li>
87			<li class="niretu"><a href="#">事業案内</a></li>
88		</ul>
89	</li>
90	<li>
91		<ul class="footer-nav2">
92			<li class="niretu"><a href="#">お問い合せ</a></li>
93		</ul>
94	</li>
95	<li>
96		<ul class="footer-nav2">
97			<li class="niretu"><a href="#">よくある質問</a></li>
98		</ul>
99	</li>
100	<li>
101		<ul class="footer-nav2">
102		<li class="niretu"><a href="#">採用</a></li>
103	</ul>
104</li>
105</ul>
106<div class="sitalogo">
107<img  src="images/rogo.svg" alt="#">
108</div>
109<p class="tyosakuken">&copy;*********** All rights reserved</p>
110	</footer>
111	</div>
112</div>
113</body>
114</html>

machine.css
1@charset "utf-8";
2.for{
3	font-size: 24px;
4	margin-top: 60px;
5	margin-bottom: 15px;
6	padding-left: 15%;
7}
8.infor{
9	margin-bottom: 60px;
10	padding-left: 15%;
11}
12h2{
13	font-size: 20px;
14	margin-bottom: 10px;
15	margin-top: 25px;
16}
17.info-container{
18	display: flex;
19}
20.car-container{
21	padding-left: 15%;
22}
23.machine{
24	font-size: 24px;
25	margin-top: 50px;
26	margin-bottom: 50px;
27}
28.syousai{
29	padding-left: 15%;
30}
31.car-costam,.insyokuzigyou{
32	font-size: 20px;
33	margin-bottom: 10px;
34}
35.car-syousai{
36	font-size: 20px;
37	margin-top: 30px;
38	margin-bottom: 20px;
39}
40.carcos-container{
41  font-size:0;
42  padding:20px 0 0;
43}
44.carcos-container a{
45  display:inline-block;
46  width: calc(80% / 3 );
47  margin: 0 calc(10% / 3 );
48}
49.carcos-container img{
50  vertical-align:bottom;
51  width: 100%;
52}
53.carcos{
54	width: 40%;
55	width: calc(100% / 3);
56}
57.car{
58	margin-top: 10px;
59	margin-left: auto;
60	margin-right: auto;
61}
62.car1:hover{
63	opacity: 0.6;
64}
65.car2:hover{
66	opacity: 0.6;
67}
68.car3:hover{
69	opacity: 0.6;
70}
71.insyokuzigyou{
72	margin-top: 50px;
73}
74.insyoku {
75	width: 33%;
76	width: calc(100% / 3);
77}
78.insyoku > p{
79	margin-top: 0;
80 	margin-bottom: 0;
81}
82.riteiru{
83	font-size: 20px;
84	margin-top: 50px;
85	margin-bottom: 30px;
86}
87.insyokuten1 img{
88	height: 40%;
89	width: auto;
90	margin:auto;
91}
92.insyoku-container{
93  font-size:0;
94  padding:20px 0 0;
95}
96.insyoku-container a{
97  display:inline-block;
98  width: calc(80% / 3 );
99  margin: 0 calc(10% / 3 );
100}
101.insyoku-container img{
102  vertical-align:bottom;
103  width: 100%;
104}
105.betu-company{
106	margin-top:50px;
107	margin-bottom: 10px;
108	list-style-type:none;
109}
110.betu-company li{
111	margin-top:30px;
112	margin-bottom: 10px;
113	list-style-type:none;
114}
115.osc{
116	list-style-type:none;
117	margin-bottom: 15px;
118}
119.info{
120	font-size: 20px;
121	margin-top: 30px;
122	margin-bottom: 20px;
123}
124
125.info-container,.hoken-container{
126	font-size: 20px;
127	margin-bottom: 20px;
128	margin-top: 40px;
129}
130.info-container,.hoken-container{
131  font-size:0;
132  padding:20px 0 0;
133}
134.info-container a,.hoken-container a{
135  display:inline-block;
136  width: calc(80% / 2);
137  margin: 0 calc(10% / 2 );
138}
139.info-container img,.hoken-container img{
140	vertical-align:bottom;
141  	width: 100%;
142}
143.hana1{
144	display: flex;
145	width: calc(90% / 2);
146	margin: 0 calc(10% / 2 );
147}
148.hoken-container{
149	margin-bottom: 50px;
150}
151.betu-company{
152	margin-top: 70px;
153}
154.betu-company li{
155	margin-top:30px;
156	margin-bottom: 10px;
157	list-style-type:none;
158}
159.cons,.zyouhou{
160	display: flex;
161}
162.cons h2{
163	margin-left: 5px;
164}
165.hanana h2{
166	margin-left: 40px;
167}
168.info1{
169	height: 360px;
170	width: auto;
171}
172.net{
173	height: 360px;
174	width: auto;
175}
176.oken{
177	margin-right: 350px;
178}
179.kizau-container{
180	display: flex;
181	margin:0;
182}
183.kizau-container p{
184	margin-left: 60px;
185}
186.kizau-container a{
187	display: inline-block;
188	width: 450px;
189	margin-right: 0;
190}
191.kizau-container img{
192	vertical-align:bottom;
193	width: 80%;
194	height: auto;
195	margin: 0;
196}
197.hanana{
198	margin: 0;
199}
200.hanana h2{
201	margin-left: 15px;
202}
203.hanana img{
204	height: 350px;
205	width: auto;
206	margin: 0;
207	padding: 0;
208}
209.hanana p{
210	margin-left: 18px;
211	margin-bottom: 5px;
212	line-height:1.4;
213}
214.hananana{
215	margin-left: 20px;
216	padding: 0;
217	width: calc(90% / 2 );
218	margin:0 calc(10% / 2);
219}
220.hananana p{
221	margin-left: 0;
222}
223.hananana img{
224	height: 350px;
225	width: auto;
226	margin-left: 0;
227}
228.hananana img a{
229
230}
231.hana img:hover{
232	opacity:0.6;
233}
234.hanana img:hover{
235	opacity:0.6;
236}
237.hananana img:hover{
238	opacity:0.6;
239}

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

回答1件

ベストアンサー

kizau-containerクラス内の２つの画像の間の余白をなくして、ピッタリくっつけたいということでしょうか。

現状、画像間の余白は margin だけではないので、margin を0にしてもくっきません。

まずは、ブラウザの検証ツールを使って余白の原因を特定しましょう。

初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

そうすると、原因は、画像と親要素（hananana　hanana）のサイズがあっていないことだとわかるでしょう。（marginもありますが。

対策は、
親要素を画像のサイズにあわせるか、画像のサイズを親要素（hananana　hanana）のサイズまで広げるか、のどちらかでしょう。

現状のCSSコードがスパゲッティ状態であまりにひどいので、
これは無視して、とりあえず画像がピッタリくっつくようなサンプルコードを提示しておきます。
これを参考にして、ご自身のコードを修正してください。

html
1<div class="wrapper01">
2    <main>
3        <div class="kizau-container">
4            <div class="hananana">
5                <a href="#"><img class="oki" src="https://placehold.jp/400x400.png" alt=""></a>
6                <h2 class="zyouhou"><a href="#">&lt;******&gt;</a></h2>
7                <p>・*****************</p>
8            </div>
9            <div class="hanana">
10                <a href="#"><img class="hoken" src="https://placehold.jp/400x400.png" alt=""></a>
11                <h2 class="cons"><a href="#">&lt;*******&gt;</a></h2>
12                <p class="kokowa">・*********************</p>
13            </div>
14        </div>
15    </main>
16</div>

css
1h2{
2    font-size: 20px;
3    margin-bottom: 10px;
4    margin-top: 25px;
5}
6
7.kizau-container {
8    display: flex;
9    justify-content: center;
10    margin:0;
11}
12
13.kizau-container > div {
14  max-width: 400px;
15  width: 50%;
16}
17
18.kizau-container p{
19    margin-left: 18px;
20    margin-bottom: 5px;
21    line-height:1.4;
22}
23
24.kizau-container h2 {
25    margin-left: 15px;
26}
27
28.kizau-container img {
29  width: 100%;
30}
31
32.kizau-container img:hover{
33    opacity:0.6;
34}

投稿2021/03/30 21:17

編集2021/03/31 04:09

hatena19

総合スコア33782

let

2021/03/31 02:54

hanananaと hananana imgと hananana aの大きさを合わせるって意味ですよね？ぴったりとくっつけるのは難しいですね。認識間違ってますか？

hatena19

2021/03/31 03:29

大きさを合わせて、marginを0にすればぴったりとくっきますよ。

let

2021/03/31 05:13

大きさとはimgなのか、containerの大きさですか？このあたりはまだ経験不足で混乱してしまいます。ご助言お願いします。

hatena19

2021/03/31 06:00

img の width を 100% に設定すれば親要素と同じ幅になります。あとは親要素の幅をお好みで設定して、マージンを0にすればくっつきます。

let

2021/03/31 15:32

imgはwidth400 height: auto;に設定してるんですが上記の設定で変更できることはありますか？

hatena19

2021/04/01 00:46

画像の幅を400pxに固定したいということなら、親要素の幅を400pxにすればいいでしょう。回答に追加したCSSでは親の幅を、max-width: 400px; width: 50%; として最大幅400pxにしてますので、画面幅が広いときは400px固定、800px以下のときは画面幅に応じて縮小する設定にしてます。

let

2021/04/01 04:29

.kizau-container > divを使う条件とはどういうときに使用するんでしょうか？初めて見るのでどのような効果があるかわかりません。質問ばかりで申し訳ありません。

hatena19

2021/04/01 04:54

「kizau-containerクラスの子要素のdiv」という意味です。 https://developer.mozilla.org/ja/docs/Web/CSS/Child_combinator 今回のHTMLだと子要素のクラスが異なるので、これをするとまとめて設定できます。

let

2021/04/01 06:43

色々とありがとうございました。また何かありましたら宜しくお願い致します。

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