размер шрифта не работает, когда я пытаюсь избавиться от пробела между встроенными блоками div

Question

хочу избавиться от пробела между этими элементами, чтобы изображения легко связывались.

Я задал похожий вопрос, и меня привели к урокам без промежутков между делами. Я пробовал без пробелов между тегами <>, без тегов, размер шрифта ноль, но я не могу заставить его работать.

это мой код

html

<section style="font-size: 0px;">
                            <div  style="font-size: 0px;" class="items">
                                <div class="item item1"></div><div class="item item2"></div><div class="item item3"></div>
                            </section>

css

.items {
    display:flex;
    position: relative;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    transition: all 0.2s;
    transform: scale(0.98);
    will-change: transform;
    user-select: none;
    cursor: pointer;
    padding: 0px;
    margin: 0px;
  }

  .items.active {
    background: rgba(255,255,255,0.3);
    cursor: grabbing;
    cursor: -webkit-grabbing;
    transform: scale(1);
  }

  .item {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    background-image: url('img/approach.png');
    min-height: 320px;
    min-width: 400px;
    margin: 2em 1em;
    @media screen and (max-width: 500px) {
      min-height: 200px;
      min-width: 200px;
    }
  }

 .item1 {
  background-image: url('../img/approachslice1.png');
  background-repeat: no-repeat;
  }

  .item2 {
    background-image: url('../img/approachslice2.png');
    background-repeat: no-repeat;
    }

    .item3 {
      background-image: url('../img/approachslice3.png');
      background-repeat: no-repeat;
      }


}

codepen https://codepen.io/catbut_1/pen/YzXZRJz

Answer 1

В вашем CSS для класса item у вас есть:

.item {

    ...

    margin: 2em 1em; // This creates the space between your images

    ...

  }

margin: 2em 1em создает пространство между вашими изображениями.

Попробуйте:

.item {
    padding: 0px;
    display: inline-block;
    background-image: url('img/approach.png');
    min-height: 320px;
    min-width: 400px;
    margin: 2em 0em;
    @media screen and (max-width: 500px) {
      min-height: 200px;
      min-width: 200px;
    }
  }

Я также согласен с комментарием Криса В. выше - размер шрифта не имеет отношения к удалению пробелов между изображениями, и это плохая практика - устанавливать его на 0.