要素間に隙間が生まれてしまう

前提・実現したいこと

画像の隙間がなぜ生まれてしまうのか知りたいです。
色のついた枠の通りに、flexboxを使ったコンテナをさらにコンテナで囲んでflexboxを使ったのですが、隙間ができてしまいます。考え方間違っているのでしょうか？
加えて、position,transformプロパティを使わず埋める方法はあるのでしょうか？
ご教授願います。（文字数がオーバーしたので、HTML、CSS一部消しました。）

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>dentalclinic</title>
6  <link rel="canonical" href="https://haniwaman.com/sample/part3/template_08/">
7  <link rel="stylesheet" href="style.css">
8  <link rel="stylesheet" href="reset.css">
9</head>
10<body>
11    <!-- メインメニュースタート -->
12  <div class="main-menu">
13    <nav class="menu">
14      <ul>
15        <li><a class="menu-left" href="file:///C:/Users/U%E3%81%8D/OneDrive/MENTA/MENTA%E8%AA%B2%E9%A1%8C(dentalclinic)/index.html">トップページ<br><span>HOME</span></a></li>
16        <li><a href="file:///C:/Users/U%E3%81%8D/OneDrive/MENTA/MENTA%E8%AA%B2%E9%A1%8C(dentalclinic)/clinic.html">医院紹介<br><span>CLINIC</span></a></li>
17        <li><a href="">診療案内<br><span>SERVICE</span></a></li>
18        <li><a href="">院長・スタッフ紹介<br><span>STAFF</span></a></li>
19        <li><a class="menu-right" href="">アクセス<br><span>ACCESS</span></a></li>
20      </ul>
21    </nav>
22  </div>
23  <!-- メインメニューラスト -->
24  <!-- メインflexboxスタート -->
25  <div class="main-wrapper">
26    <!-- 左メニュー上下flexboxスタート -->
27    <div class="side-menu-box">
28      <!-- 左のメニュー上側スタート -->
29      <div class="side-menu1">
30        <h2><span class="margin-15"></span>一般歯科</h2>
31        <ul>
32          　<li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>虫歯治療</a></li>
33          　<li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>歯周病治療</a></li>
34          　<li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>入れ歯</a></li>
35          　<li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>予防歯科</a></li>
36        </ul>
37      </div>
38      <!-- 左のメニュー上側ラスト -->
39      <!-- 左のメニュー下側スタート -->
40      <div class="side-menu2">
41        <h2><span class="margin-15"></span>審美歯科</h2>
42        <ul>
43          　 <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>ホワイトニング</a></li>
44          　 <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>オールセラミック</a></li>
45          　 <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>セラミックインレー</a></li>
46          　 <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>PMTC</a></li>
47        </ul>
48      </div>
49      <!-- 左のメニュー下側ラスト -->
50    </div>
51    <!-- 左メニュー上下flexboxラスト -->
52    <!-- 画像と新着情報のflexboxスタート -->
53    　　<div class="mainImage-whatsNew-box">
54      <!-- メイン画像スタート -->
55      <div class="mainImage">
56        <img src="https://haniwaman.com/sample/part3/template_08/common/images/in01.jpg" alt="mainImage">
57      </div>
58      <!-- メイン画像ラスト -->
59      <!-- 新着情報スタート -->
60      <div class="whatsNew">
61        <h2>新着情報</h2>
62        <ul>
63          <li><span>2020年08月01日</span>[診療時間変更のお知らせ]長期休診の前日8月11日は、通常より1時間長く診療することにしました。ご予約をお待ちしております。</li>
64          <li><span>2020年07月24日</span>[8月の休診のお知らせ]8月12日～16日の間は休診とさせていただきます。何卒よろしくお願いします。</li>
65          <li><span>2020年07月02日</span>[こどもデンタル教室のご案内]毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております。</li>
66          <li><span>2020年06月20日</span>[7月休診日のお知らせ]7月は土日祝日以外の休診日はありません。ご来院お待ちしております。</li>
67          <li><span>2020年06月01日</span>ホームページをリニューアルしました。</li>
68        </ul>
69      </div>
70      <!-- 新着情報ラスト -->
71    </div>
72    <!-- 画像と新着情報のflexboxラスト -->
73  </div>
74  <!-- メインflexboxラスト　-->

resetCSS
1html, body, div, span, object, iframe,
2h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3abbr, address, cite, code,
4del, dfn, em, img, ins, kbd, q, samp,
5small, strong, sub, sup, var,
6b, i,
7dl, dt, dd, ol, ul, li,
8fieldset, form, label, legend,
9table, caption, tbody, tfoot, thead, tr, th, td,
10article, aside, canvas, details, figcaption, figure,
11footer, header, hgroup, menu, nav, section, summary,
12time, mark, audio, video {
13    margin:0;
14    padding:0;
15    border:0;
16    outline:0;
17    font-size:100%;
18    vertical-align:baseline;
19    background:transparent;
20}
21body {
22    line-height:1;
23}
24article,aside,details,figcaption,figure,
25footer,header,hgroup,menu,nav,section {
26    display:block;
27}
28nav ul {
29    list-style:none;
30}
31blockquote, q {
32    quotes:none;
33}
34blockquote:before, blockquote:after,
35q:before, q:after {
36    content:'';
37    content:none;
38}
39a {
40    margin:0;
41    padding:0;
42    font-size:100%;
43    vertical-align:baseline;
44    background:transparent;
45}
46ins {
47    background-color:#ff9;
48    color:#000;
49    text-decoration:none;
50}
51mark {
52    background-color:#ff9;
53    color:#000;
54    font-style:italic;
55    font-weight:bold;
56}
57del {
58    text-decoration: line-through;
59}
60abbr[title], dfn[title] {
61    border-bottom:1px dotted;
62    cursor:help;
63}
64table {
65    border-collapse:collapse;
66    border-spacing:0;
67}
68hr {
69    display:block;
70    height:1px;
71    border:0;
72    border-top:1px solid #cccccc;
73    margin:1em 0;
74    padding:0;
75}
76input, select {
77    vertical-align:middle;
78}

CSS
1body {
2  font-family: Verdana, Arial, Helvetica, meirio, メイリオ, "Hiragino Maru Gothic Pro", "ヒラギノ丸ゴ Pro W4", Osaka, "ＭＳ Ｐゴシック", sans-serif;
3  color: #515151;
4  font-weight: 400;
5  background-color: #F6F6F6 !important;
6}
7.margin-10 {
8  margin-right: 10px;
9}
10.margin-15 {
11  margin-right: 15px;
12}
13
14/* メインメニュースタート */
15.menu ul {
16  display: flex;
17  justify-content: center;
18  padding-top: 18px;
19}
20.menu ul li a {
21  display: block;
22  width: 182px;
23  background: linear-gradient(rgb(156, 227, 225), rgb(108, 198, 196));
24  text-align: center;
25  border: solid 1px #6CC6C4;
26  cursor: pointer;
27  padding: 20px 0px;
28  color: #FFFFFF;
29  text-decoration: none;
30  font-weight: 700;
31  font-size: 14px;
32  line-height: 15px;
33}
34.menu ul li a span {
35  font-size: 10px;
36  line-height: 15px;
37}
38.menu ul li a:hover {
39  background: linear-gradient(rgb(108, 198, 196), rgb(156, 227, 225));
40}
41.menu-left {
42  border-top-left-radius: 6px;
43  border-bottom-left-radius: 6px;
44}
45.menu-right {
46  border-bottom-right-radius: 6px;
47  border-top-right-radius: 6px;
48}
49.main-menu p {
50  font-size: 10px;
51  margin-left: 175px;
52}
53/*メインメニューラスト*/
54/* メインflexboxスタート */
55.main-wrapper {
56  display: flex;
57  width: 920px;
58  margin: 0 auto;
59  margin-top: 20px;
60}
61/* メインflexboxラスト */
62.side-menu-box {
63  display: flex;
64  flex-direction: column;
65}
66/*左メニュー上側スタート*/
67.side-menu1 {
68  border: solid 1px #6CC6C4;
69  width: 260px;
70  border-top-right-radius: 6px;
71  border-top-left-radius: 6px;
72  background-color: #FFFFFF;
73}
74.side-menu1 h2 {
75  background: linear-gradient(rgb(156, 227, 225), rgb(108, 198, 196));
76  color: #FFFFFF;
77  border-top-right-radius: 6px;
78  border-top-left-radius: 6px;
79  font-size: 16px;
80  padding: 10px 0px;
81  line-height: 22px;
82}
83.side-menu1 ul {
84  list-style: none;
85  padding-bottom: 20px;
86  margin-left: 15px;
87}
88.side-menu1 ul li a {
89  text-decoration: none;
90  color: #515151;
91  font-weight: 700;
92  font-size: 14px;
93  border-bottom: solid 1px #6CC6C4;
94  width: 234px;
95  display: block;
96  padding-bottom: 13px;
97  color: #595959;
98}
99.side-menu1 ul li a:hover {
100  color: #6cc6c4;
101}
102.side-menu1 ul li a img {
103  padding-left: 5px;
104}
105/* 左メニュー上側ラスト */
106/* 左メニュー下側スタート */
107.side-menu2 {
108  border: solid 1px #6CC6C4;
109  width: 260px;
110  border-top-right-radius: 6px;
111  border-top-left-radius: 6px;
112  background-color: #FFFFFF;
113  margin-top: 20px;
114}
115.side-menu2 h2 {
116  background: linear-gradient(rgb(156, 227, 225), rgb(108, 198, 196));
117  color: #FFFFFF;
118  border-top-right-radius: 6px;
119  border-top-left-radius: 6px;
120  font-size: 16px;
121  padding: 10px 0px;
122  line-height: 22px;
123}
124.side-menu2 ul {
125  list-style: none;
126  padding-bottom: 20px;
127  margin-left: 15px;
128}
129.side-menu2 ul li a {
130  text-decoration: none;
131  color: #515151;
132  font-weight: 700;
133  font-size: 14px;
134  border-bottom: solid 1px #6CC6C4;
135  width: 234px;
136  display: block;
137  padding-bottom: 13px;
138  color: #595959;
139}
140.side-menu2 ul li a:hover {
141  color: #aec24c;
142}
143.side-menu2 ul li a img {
144  padding-left: 5px;
145}
146/* 左メニュー下側ラスト */
147/* 画像と新着情報のflexboxスタート */
148.mainImage-whatsNew-box {
149  display: flex;
150  flex-direction: column;
151  width: 640px;
152}
153/* 画像と新着情報のflexboxラスト　*/
154/* メイン画像スタート */
155.mainImage {
156  display: block;
157}
158/* メイン画像ラスト */
159/* 新着情報スタート */
160.whatsNew {
161  width: 600px;
162  background-color: #FFFFFF;
163  padding: 20px 20px 45px 20px;
164  margin-top: 10px;
165}
166.whatsNew h2 {
167  border-bottom: solid 3px #6CC6C4;
168  padding: 0 20px;
169  font-size: 16px;
170  font-weight: 700;
171  text-align: left;
172  line-height: 50px;
173  margin-bottom: 15px;
174}
175.whatsNew ul li {
176  font-size: 13px;
177  border-bottom: dotted 1px #CCCCCC;
178  list-style: none;
179  padding: 15px 0;
180  line-height: 20px;
181}
182.whatsNew ul li span {
183  font-weight: 700;
184  font-size: 13px;
185  padding-right: 31px;
186  line-height: 23px;
187  display: block;
188  float: left;
189}
190/* 新着情報ラスト */

試したこと

・他のflexプロパティを指定した
・*{margin:0;!important}　 *{padding:0;!important}を指定してみた（この隙間は埋まらなかった）

kei344

2020/03/31 14:36

（質問は編集できます）質問タグの「Flex」はCSSのFlexboxと関係ありません。

kyoya0819

2020/03/31 17:11

当方の環境では現状のコードでは状況が再現できません。 reset.cssもご提示していただけると幸いです。

退会済みユーザー

2020/03/31 23:40

内部は260 740 外部は920 この差の分が空いてるからでは

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

回答1件

ベストアンサー

質問への追記・修正依頼には従っていただくとして、不要な余白が付くのはHTMLソースのところどころに全角スペースが入っているからでは？

------ここから追記------

もう少し詳しく書くと、<div class="mainImage-whatsNew-box">の前に付いている二つの全角スペースを削除すれば問題の隙間は消えます。
その全角スペースを削除すると、asahina1979さんが指摘している通り20pxの余裕があるのでその分右側に余白が付きます。
この余白は外部と内部の幅を同じにすれば消えます。

投稿2020/03/31 20:31

編集2020/04/01 03:00