问题：

Question

请仔细阅读问题。它与关于How to remove the space between inline-block elements的那个不一样。

考虑以下示例：

HTML：

<body>
  <div>
    <button class="my-class">Hello</button>
    <button class="my-class">Stack</button>
    <button class="my-class">Overflow</button>
  </div>
</body>

CSS：

.my-class {
  display: inline-block;
  margin-left: -4px;   /* Remove the space between inline elements */
  border: 1px solid #cccccc;
  padding: 20px;
}

产生：

enter image description here

但是，如果我添加：

body {
  font-family: Arial;
}

它会在第二个和第三个按钮之间产生1px的空间：

enter image description here

问题是：为什么将font-family添加到body会影响按钮之间的空间？

PLAYGROUND HERE

Answer 1

这是因为每种字体的宽度都不同，即使是空格字符也是如此。您已经了解了内联块的空白问题。因此，当您设置Arial时，这些空格会从浏览器的默认字体（或任何其他宽度不同的字体）稍微改变其宽度，在我的情况下就是Times New Roman。

查看设置等宽字体时更改的严重程度。

现在，为什么它发生在第2和第3个盒子之间，而不是第1个和第2个盒子？我非常确定它归结为根据输入的单词的宽度舍入像素值，似乎在背景中存在伪子像素渲染，但十进制值在最终渲染过程中被舍入。看看如果使用Arial并打印Hell Stack Overflow而不是Hello Stack Overflow会发生什么 - 间隙看起来相同。所以，这只是一个不受欢迎的巧合。

证明这是一个舍入问题的另一点是各种页面缩放级别之间的差距的变化。在处理HTML中的小数时，在布局中获得这些像素不匹配是相当常见的。缩放增加了另一个分割/乘法阶段，它进一步改变了核心值，导致最终布局中完全不可预测的行为。

Answer 2

这是因为你将按钮显示为inline-block元素，当你有内联元素时，空白是重要的，并且呈现的方式与呈现单词之间的空格的方式相同。

即内联块使空白显着，因此将在inline-block元素之间的源中显示空格。

例如：您可以通过添加inline-block来居中text-align: center;个元素，方法与使用其父块元素中的文本居中相同。 - DEMO

为什么在body上添加font-family会影响按钮之间的空间？

不同的字体在单词之间可以有不同的间距，如果您将font-family: monospace;与font-family: sans-serif;进行比较，那么您会看到monospace字体在单词之间的空间大于sans-serif字体和inline-block元素也以相同的方式呈现，并且在元素之间具有间距。

删除inline-block元素之间空格的最佳方法是将font-size: 0;添加到父元素。

<强> DEMO

div {
  font-size: 0;
}
.my-class {
  display: inline-block;
  border: 1px solid #cccccc;
  padding: 20px;
  font-size: 16px;
}

<div>
    <button class="my-class">Hello</button>
    <button class="my-class">Stack</button>
    <button class="my-class">Overflow</button>
</div>

Answer 3

答案假定DirectWrite已启用。否则您将不会注意到指定的症状和分数宽度。还假设默认的serif和sans-serif字体是Times New Roman和Arial。

无论谁说空间角色是4px宽都是错误的：

＆＃13;

$(function() {
    $(".demo").each(function() {
        var width = $("span", this).width();
        $("ins", this).text("total width: " + width + "px, " + (width / 10) + "px per space)");
    });
});

＆＃13;

.demo {
    white-space: pre;
    overflow: hidden;
    background: #EEE;
}
.demo-1 {
    font: 16px/1 sans-serif;
}
.demo-2 {
    font: 16px/1 serif;
}
.demo-3 {
    font: 16px/1 monospace;
}
.demo span {
    float: left;
    background: #CF0;
}
.demo ins {
    float: right;
    font-size: smaller;
}

＆＃13;

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<p>The green blocks contain 10 spaces:</p>
<p class="demo demo-1"><span>          </span><ins></ins></p>
<p class="demo demo-2"><span>          </span><ins></ins></p>
<p class="demo demo-3"><span>          </span><ins></ins></p>

＆＃13;

请注意：

对于给定的大小，字符宽度取决于字体系列。
字符宽度不一定必须是整数。 Serif字体为您提供了一个很好的整数（4px），但Sans-serif字体为您提供了小数（4.4px）。

您可以在不同的浏览器中获得不同的结果，具体取决于它们如何处理两个块之间的小数差距（例如，对于16px Arial，为4.4px）。 CSS规范对此保持沉默。

在启用了DirectWrite的Chrome中，由于四舍五入，空格交替呈现为4px和5px。这解释了为什么第一个和第二个按钮之间没有间隙，第二个和第三个按钮之间没有1px间隙。尝试在原始示例中添加更多按钮，并注意模式的重复方式（Demo）。

使用margin-left: -4.4px似乎有效，但保证无效。 Consider going back to the alternate solutions

Answer 4

问题：

这是因为display设置为inline-block。

内联块是：

该元素生成一个将与其一起流动的块元素框周围的内容就像它是一个单行内联框（行为很多就像被替换的元素一样）

»»在此处详细了解展示广告资源： DISPLAY INFO

将（S）：

删除空格
负边距
略过结束标记
将字体大小设置为零
只需浮动它们
只需使用flexbox

有关每个解决方案检查的详细信息

Fighting the Space Between Inline Block Elements

我上面的首选解决方案是

将字体大小设置为零

是一个代码段，包含您的代码和我首选的解决方案：

div {
 font-size:0;
}

.my-class {
  display: inline-block;
  border: 1px solid #cccccc;
  padding: 20px;
  font:normal 12px Arial;
}

<div>
  <button class="my-class">Hello</button>
  <button class="my-class">Stack</button>
  <button class="my-class">Overflow</button>
</div>

另外，这是一个代码片段，其精确代码仅将font-family从body更改为具有display:inline-block的元素，并实现相同的输出作为我的 FIRST SNIPPET

.my-class {
  display: inline-block;
  margin-left: -4px;  /* Remove the space between inline elements */
  border: 1px solid #cccccc;
  padding: 20px;
  font-family:Arial;
}

<div>
  <button class="my-class">Hello</button>
  <button class="my-class">Stack</button>
  <button class="my-class">Overflow</button>
</div>

修改

OP的问题：


为什么在正文中添加font-family会影响之间的空间   按钮？

网络排版中有
：

<强>无衬线

字母上没有装饰标记或衬线的字体。这些字体通常被认为更容易在屏幕上阅读。

<强>衬线

字符上带有装饰性标记或字体的字体。

<强>等宽

所有字符都相同的字体。

<强>草书

类似草书写作的字体。这些字体可能具有装饰性外观，但它们很难以小尺寸阅读，因此通常会谨慎使用。

<强>奇幻

可能包含符号或其他装饰属性但仍代表指定字符的字体。

由于 Arial 是 sans-serif 字体，因此非固定宽度字体（如等宽字体）应用于{{ 1}}子元素显示body（没有修复间隙），它将在子元素之间创建空间。

虽然如果您将inline-block应用于子元素，例如我DID 在我的 2ND SNIPPET 中，则不会再发生这种情况。

一篇文章的评论：


如您所示，内联元素之间的差距是空格字符。   宽度取决于字体（系列，变体等）和近似值   到.25em

您可以查看here

完整文章如下

ARTICLE

Answer 5

DEMO

问题是标签之间有隐藏空格（换行符和一些标签计为空格，只是为了清晰）。最小化HTML或注释空格，一切都正常：

＆＃13;

body {
  font-family: Arial;
}

.my-class {
  display: inline-block;
  margin-left: -4px;
  border: 1px solid #cccccc;
  padding: 20px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <button class="my-class">Hello</button><!--
    --><button class="my-class">Stack</button><!--
    --><button class="my-class">Overflow</button>
  </div>
</body>
</html>

＆＃13;

Answer 6

检查演示并使用此CSS。如果您不满意，只需更改字体大小即可。它将得到修复。

body {
  font-family: Arial;
  font-size: 15px;
  
}

.my-class {
  display: inline-block;
  margin: 0 0 0 -4px;
  background-color: ccc;
  border: 1px solid #ccc;
  padding: 20px;
}

<div>
    <button class="my-class">Hello</button>
    <button class="my-class">Stack</button>
    <button class="my-class">Overflow</button>
  </div>

另见JSfiddle。

Answer 7

我建议使用

float:left

或

float:right

而不是

 display:inline-block;

Answer 8

use the below css for this: 

.my-class {
  display: inline-block;
  margin-left: -4px;
  border: 1px solid #cccccc;
  padding: 20px;
  margin-right:-1px;
}

为什么font-family会影响按钮之间的空间？

8 个答案:

问题：

内联块是：

将（S）：

Fighting the Space Between Inline Block Elements

ARTICLE