为什么Firefox和Chrome之间的内联阻止结果不同？

Question

我使用inline-block并排放置元素。 我想使元素之间的间距为2px，所以我为span元素设置了负边距。

* {
  margin: 0;
}

.content {
  width: 100%;
  min-width: 320px;
}

span {
  display: inline-block;
}

span {
  display: inline-block;
  width: 78px;
  padding: 3px 10px;
  cursor: pointer;
  background: #ddd;
  color: #777;
  margin-right: -2px;
  width: calc(25% - 22px);
}

span:hover {
  background: #eee;
}

<div class="content">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</div>

---

问题1 。它与Firefox 64.0兼容。但是，在使用Google Chrome 71.0进行检查时，最后一个span元素出现了。对于Firefox和Chrome，浏览器的默认字体大小为16px。

此外，它在CodePen中也能正常工作，但是在stackoverflow代码段中却无法正常工作。

为什么会出现这些问题？ 我已阅读以下问题，但这似乎与该问题的原因无关。

• How do I remove the space between inline-block elements?

Firefox（CodePen版本）中的屏幕截图： Firefox的屏幕截图（stackoverflow的运行摘要版本）： Google Chrome浏览器中的屏幕截图：

---

问题2 。我将width: 25%设置为span元素的全角。但是，除非从25％（在Firefox中）减去22像素，否则水平宽度不会变满。

如何计算22px的值？ 我不明白为什么(padding-left + padding-right)*4 - negative-margin = 22px和padding-left在每个padding-right元素中设置了span和if(isset($_POST['check_username'])){ $user_login_name=$_POST['check_username']; $sql="SELECT user_login_name FROM users WHERE user_login_name='$user_login_name'"; $result=mysqli_query($conn, $sql); $numRows=mysqli_num_rows($result); $rows=mysqli_fetch_array($result,MYSQLI_NUM); var_dump($rows); if($numRows>0){ // If exists rows foreach($rows as $field) echo $field." => "; echo "<br>"; } else echo "Database empty!"; } （总共80 px）。

我已阅读以下问题，但这似乎与该问题的原因无关。

• CSS does the width include the padding?