HTML中的新行创建隐式边距

Question

这一定是一个非常常见的问题，但我找不到解决方案。

我在两个spans之间得到了一个我不想要的边距。请考虑以下示例。

的style.css

.item {
  background-color: blue;
  color: white;
  margin: 0;
  padding: 6px;
}

items.html

<div>
  <span *ngFor="let index of [1,2,3,4,5,6]" class="item">{{index}}</span>
  <span class="item">7</span>
</div>

1到6像最好的朋友一样待在一起，而7被视为流浪者。问题可以通过将span 7移动到与其他行相同的行来解决，但这不会随我而去。

Answer 1

回答很多次。这是因为新行在元素之间生成单个空白区域。解决它：

<span></span><span></span>

<span></span><!--
--></span>

<div style="font-size: 0">

<span style="float: left">

Answer 2

我不知道这可以帮到我，但我刚刚补充道 ＆＃34; float：left＆＃34;进入你的＆＃34;项目＆＃34;类。这很有效。

.item {
  background-color: blue;
  color: white;
  margin: 0;
  padding: 6px;
 float: left;
}