防止断线间距

Question

我的网站上有 n 个图块（图片中的黄色元素）。当网站太小而无法将它们放在一条线上时，它显然会将它们放在第二行。但不知何故，它们之间有这个空间。源中的元素之间没有空格。 有谁知道我怎么能删除这个空间？我知道我可以使用一张桌子，但实际上没有更简单的方法吗？

容器中的瓷砖（黄色）（蓝色）

＆＃13;

＆＃13;

.container {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 50%;
  background-color: rgba(66, 134, 244, .2);
  padding: 5px;
}

.item {
  height: 150px;
  width: 150px;
  display: inline-block;
  box-sizing: border-box;
  background-color: rgba(232, 223, 55, .2);
  box-sizing: border-box;
  border: 1px solid black;
}

＆＃13;

<div class="container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

inline-block元素会给您带来麻烦。您可以在容器上设置font-size: 0px，以消除小范围：

.container {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 50%;
    background-color: rgba(66, 134, 244, .2);
    padding: 5px;
    font-size: 0px;
}

Updated fiddle

Answer 2

您可以在CSS中使用margin-top方法。

例如：

  

的margin-top：-5px;

尝试设置不同的值，直到元素之间的空间被移除。