スマホサイトで横並びにバナーを配置したいのですがバナー同士の間隔が縮まりません。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
スマホサイトで横並びにバナーを配置したいのですがバナー同士の間隔が縮まりません。

発生している問題・エラーメッセージ

初心者なので、全くわかりませんがバナーを二段２列配置にしてワイド100％で作りたいと思っているのですが上下左右のバナーどうしの隙間がどうしても空いてしまいます。1pixぐらいの隙間でいいのですがやり方がわかりません。。。

該当のソースコード

<div style="display: flex; flex-wrap: wrap;">
  <div style=" width: 50%;  margin: 0%;">
    <a style="  display: table;  height:  100%px;" href="">
      <div style="  display: table-cell;  vertical-align: middle;">
        <img alt="" style="  width: 100%;  height: auto;  max-height: 87px;" src="./uploadFile/asobikata-kairakuen.jpg">
      </div>
    </a>
  </div>
  <div style=" width: 50%;  margin: 0%;">
    <a style="  display: table; height:  100px;" href="/special_company_kidsbasecamp">
      <div style="  display: table-cell;  vertical-align: middle;">
        <img alt="" style="  width: 100%;  height: auto;  max-height: 87px;" src="./uploadFile/hotail-kairakuen.jpg">
      </div>
    </a>
  </div>
  <div style=" width: 100%;  margin: 0%;">
    <a style="  display: table; height: 100px;" href="/special_company_kidsbasecamp">
      <div style="  display: table-cell;  vertical-align: middle;">
        <img alt="" style="  width: 100%;  height: auto;  max-height: 87px;" src="./uploadFile/kuchikomi-kairakuen.jpg">
      </div>
    </a>
  </div>
  <div style=" width: 100%;  margin: 0%;">
    <a style="  display: table;  height:  100px;" href="/special_company_kidsbasecamp">
      <div style="  display: table-cell;  vertical-align: middle;">
        <img alt="" style="  width: 100%;  height: auto;  max-height: 87px;" src="./uploadFile/line-kairakuen.jpg">
      </div>
    </a>
  </div>
</div>

試したこと

HP作成ソフト内のエディタを使ってHTMLの記述を行なっております。

補足情報（FW/ツールのバージョンなど）

初心者なので、全くわかりませんがバナーを二段２列配置にしてワイド100％で作りたいと思っているのですが上下左右のバナーどうしの隙間を縮める方法を教えてください。

よろしく願いいたします。

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

回答1件

ベストアンサー

↓このような感じにしたいのかな？という想定で回答します。

aタグ内のdivや、display:table系の設定はは不要かと思います。
flexで並べる中身の要素については、
width:50%にした状態でmargin設定するのは難しいので、
calc(50% - 2px)とし、marginを上下1pxつけるとよさそうです。

バナー画像の縦横比が同じであれば、
あとは画像にwidth: 100%; height: auto;をつけるだけでうまく広がってくれるのではないかと思います。

修正例

HTML
1<div style="display: flex; flex-wrap: wrap;">
2  <div style=" width: calc(50% - 2px); margin: 1px;">
3    <a style="" href="/special_company_kidsbasecamp">
4        <img alt="" style="width: 100%; height: auto;" src="https://placehold.jp/100x40.png">
5    </a>
6  </div>
7  <div style=" width: calc(50% - 2px); margin: 1px;">
8    <a style="" href="/special_company_kidsbasecamp">
9        <img alt="" style="width: 100%; height: auto;" src="https://placehold.jp/100x40.png">
10    </a>
11  </div>
12  <div style=" width: calc(50% - 2px); margin: 1px;">
13    <a style="" href="/special_company_kidsbasecamp">
14        <img alt="" style="width: 100%; height: auto;" src="https://placehold.jp/100x40.png">
15    </a>
16  </div>
17  <div style=" width: calc(50% - 2px); margin: 1px;">
18    <a style="" href="/special_company_kidsbasecamp">
19        <img alt="" style="width: 100%; height: auto;" src="https://placehold.jp/100x40.png">
20    </a>
21  </div>
22</div>