質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.92%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 614

score 13

前提・実現したいこと

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

該当のソースコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>dentalclinic</title>
  <link rel="canonical" href="https://haniwaman.com/sample/part3/template_08/">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="reset.css">
</head>
<body>
    <!-- メインメニュースタート -->
  <div class="main-menu">
    <nav class="menu">
      <ul>
        <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>
        <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>
        <li><a href="">診療案内<br><span>SERVICE</span></a></li>
        <li><a href="">院長・スタッフ紹介<br><span>STAFF</span></a></li>
        <li><a class="menu-right" href="">アクセス<br><span>ACCESS</span></a></li>
      </ul>
    </nav>
  </div>
  <!-- メインメニューラスト -->
  <!-- メインflexboxスタート -->
  <div class="main-wrapper">
    <!-- 左メニュー上下flexboxスタート -->
    <div class="side-menu-box">
      <!-- 左のメニュー上側スタート -->
      <div class="side-menu1">
        <h2><span class="margin-15"></span>一般歯科</h2>
        <ul>
           <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>
           <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>
           <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>
           <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>
        </ul>
      </div>
      <!-- 左のメニュー上側ラスト -->
      <!-- 左のメニュー下側スタート -->
      <div class="side-menu2">
        <h2><span class="margin-15"></span>審美歯科</h2>
        <ul>
            <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>
            <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>
            <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>
            <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>
        </ul>
      </div>
      <!-- 左のメニュー下側ラスト -->
    </div>
    <!-- 左メニュー上下flexboxラスト -->
    <!-- 画像と新着情報のflexboxスタート -->
      <div class="mainImage-whatsNew-box">
      <!-- メイン画像スタート -->
      <div class="mainImage">
        <img src="https://haniwaman.com/sample/part3/template_08/common/images/in01.jpg" alt="mainImage">
      </div>
      <!-- メイン画像ラスト -->
      <!-- 新着情報スタート -->
      <div class="whatsNew">
        <h2>新着情報</h2>
        <ul>
          <li><span>2020年08月01日</span>[診療時間変更のお知らせ]長期休診の前日8月11日は、通常より1時間長く診療することにしました。ご予約をお待ちしております。</li>
          <li><span>2020年07月24日</span>[8月の休診のお知らせ]8月12日~16日の間は休診とさせていただきます。何卒よろしくお願いします。</li>
          <li><span>2020年07月02日</span>[こどもデンタル教室のご案内]毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております。</li>
          <li><span>2020年06月20日</span>[7月休診日のお知らせ]7月は土日祝日以外の休診日はありません。ご来院お待ちしております。</li>
          <li><span>2020年06月01日</span>ホームページをリニューアルしました。</li>
        </ul>
      </div>
      <!-- 新着情報ラスト -->
    </div>
    <!-- 画像と新着情報のflexboxラスト -->
  </div>
  <!-- メインflexboxラスト -->
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}
body {
  font-family: Verdana, Arial, Helvetica, meirio, メイリオ, "Hiragino Maru Gothic Pro", "ヒラギノ丸ゴ Pro W4", Osaka, "MS Pゴシック", sans-serif;
  color: #515151;
  font-weight: 400;
  background-color: #F6F6F6 !important;
}
.margin-10 {
  margin-right: 10px;
}
.margin-15 {
  margin-right: 15px;
}

/* メインメニュースタート */
.menu ul {
  display: flex;
  justify-content: center;
  padding-top: 18px;
}
.menu ul li a {
  display: block;
  width: 182px;
  background: linear-gradient(rgb(156, 227, 225), rgb(108, 198, 196));
  text-align: center;
  border: solid 1px #6CC6C4;
  cursor: pointer;
  padding: 20px 0px;
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  line-height: 15px;
}
.menu ul li a span {
  font-size: 10px;
  line-height: 15px;
}
.menu ul li a:hover {
  background: linear-gradient(rgb(108, 198, 196), rgb(156, 227, 225));
}
.menu-left {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.menu-right {
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
}
.main-menu p {
  font-size: 10px;
  margin-left: 175px;
}
/*メインメニューラスト*/
/* メインflexboxスタート */
.main-wrapper {
  display: flex;
  width: 920px;
  margin: 0 auto;
  margin-top: 20px;
}
/* メインflexboxラスト */
.side-menu-box {
  display: flex;
  flex-direction: column;
}
/*左メニュー上側スタート*/
.side-menu1 {
  border: solid 1px #6CC6C4;
  width: 260px;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  background-color: #FFFFFF;
}
.side-menu1 h2 {
  background: linear-gradient(rgb(156, 227, 225), rgb(108, 198, 196));
  color: #FFFFFF;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  font-size: 16px;
  padding: 10px 0px;
  line-height: 22px;
}
.side-menu1 ul {
  list-style: none;
  padding-bottom: 20px;
  margin-left: 15px;
}
.side-menu1 ul li a {
  text-decoration: none;
  color: #515151;
  font-weight: 700;
  font-size: 14px;
  border-bottom: solid 1px #6CC6C4;
  width: 234px;
  display: block;
  padding-bottom: 13px;
  color: #595959;
}
.side-menu1 ul li a:hover {
  color: #6cc6c4;
}
.side-menu1 ul li a img {
  padding-left: 5px;
}
/* 左メニュー上側ラスト */
/* 左メニュー下側スタート */
.side-menu2 {
  border: solid 1px #6CC6C4;
  width: 260px;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  background-color: #FFFFFF;
  margin-top: 20px;
}
.side-menu2 h2 {
  background: linear-gradient(rgb(156, 227, 225), rgb(108, 198, 196));
  color: #FFFFFF;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  font-size: 16px;
  padding: 10px 0px;
  line-height: 22px;
}
.side-menu2 ul {
  list-style: none;
  padding-bottom: 20px;
  margin-left: 15px;
}
.side-menu2 ul li a {
  text-decoration: none;
  color: #515151;
  font-weight: 700;
  font-size: 14px;
  border-bottom: solid 1px #6CC6C4;
  width: 234px;
  display: block;
  padding-bottom: 13px;
  color: #595959;
}
.side-menu2 ul li a:hover {
  color: #aec24c;
}
.side-menu2 ul li a img {
  padding-left: 5px;
}
/* 左メニュー下側ラスト */
/* 画像と新着情報のflexboxスタート */
.mainImage-whatsNew-box {
  display: flex;
  flex-direction: column;
  width: 640px;
}
/* 画像と新着情報のflexboxラスト */
/* メイン画像スタート */
.mainImage {
  display: block;
}
/* メイン画像ラスト */
/* 新着情報スタート */
.whatsNew {
  width: 600px;
  background-color: #FFFFFF;
  padding: 20px 20px 45px 20px;
  margin-top: 10px;
}
.whatsNew h2 {
  border-bottom: solid 3px #6CC6C4;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  line-height: 50px;
  margin-bottom: 15px;
}
.whatsNew ul li {
  font-size: 13px;
  border-bottom: dotted 1px #CCCCCC;
  list-style: none;
  padding: 15px 0;
  line-height: 20px;
}
.whatsNew ul li span {
  font-weight: 700;
  font-size: 13px;
  padding-right: 31px;
  line-height: 23px;
  display: block;
  float: left;
}
/* 新着情報ラスト */

試したこと

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2020/03/31 23:36

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

    キャンセル

  • kyoya0819

    2020/04/01 02:11

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

    キャンセル

  • asahina1979

    2020/04/01 08:40

    内部は260 740
    外部は920

    この差の分が空いてるからでは

    キャンセル

回答 1

checkベストアンサー

+2

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/04/01 19:39

    ご指摘の通り、空白が原因でした!
    空白でここまで影響がでるとは思っていませんでした。
    勉強になりました。ありがとうございます!

    キャンセル

  • 2020/04/01 19:49

    ちなみに改行コードでも崩れるのがhtml

    キャンセル

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

  • ただいまの回答率 87.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る