内联块导致边距[重复]

Question

不知何故，我的水平滑块中的框之间有一个我似乎无法修复的边距。我试过摆弄 margin-right:-3, word-spacing: -3;, display:block;浮动：左；，显示：内联弹性；多很多。我不确定是什么原因造成的，因此我很难寻找解决方案。我以为是内联块。

这里有一个小提琴；但是我似乎无法在我自己的代码中使用水平鼠标效果：https://jsfiddle.net/urzsj724/1/

这是我使用鼠标滚轮进行水平滚动时使用的：

https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js

$(function() {
   $(".wrapper").mousewheel(function(event, delta) {
      this.scrollLeft -= (delta * 10);
      event.preventDefault();
   });
});

.container {
  width: 100vw;
  margin:0;
}

.wrapper {
  overflow: hidden;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  word-spacing: -10;
}
.box {
  display: inline-block;
  height:100vh;
  width: 40vw;
  background-color: white;
  border:1px solid black;
  text-align: center;
  vertical-align: center;
  margin:0;
}

.box img{
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

  <div class="container">
    <div class="wrapper">
      <div class="box">Item1</div>
      <div class="box">Item2</div>
      <div class="box">Item3</div>
      <div class="box">Item4</div>
    </div>
  </div>

Answer 1

你可以试试 display: inline-flex 在包装器上。

https://jsfiddle.net/3qmwLt06/

.wrapper {
 overflow: hidden;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  word-spacing: -10;
  display:inline-flex;
}

Answer 2

inline-blocks 总是在它们之间创建小的边距，试试这个：

.box {
    font-size: 0
}

在 font-size 0 之后，设置你的 font-size。