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

Question

DEMO

请仔细阅读问题.它与如何删除内联块元素之间的空间不同.

请考虑以下示例:

HTML:

body {
  /* font-family: Arial; */
}

.my-class {
  display: inline-block;
  margin: 0 0 0 -4px;
  background-color: transparent;
  border: 1px solid #ccc;
  padding: 20px;
}

CSS:

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

产生:

但是,如果我补充:

body {
  font-family: Arial;
}

它导致第二个和第三个按钮之间的空间为1px:

现在的问题是:为什么增加font-family的body影响按键之间的空间？

这里的游乐场

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;用于将文本居中于其父块元素的相同方式来居中元素.- 演示

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

不同的字体可以在单词之间具有不同的间距,如果与之比较font-family: monospace;,font-family: sans-serif;您将看到monospace字体在字之间比sans-serif字体具有更多的空间,并且inline-block元素也以相同的方式呈现并且具有元素之间的间距.

• Monospace DEMO

• Sans-serif DEMO

删除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宽是错误的:

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

.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;
}

<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>

注意:

1. 对于给定大小,字符宽度取决于字体系列.
2. 字符宽度不一定必须是整数.Serif字体为您提供了一个很好的整数(4px),但Sans-serif字体为您提供了小数(4.4px).

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

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

使用margin-left: -4.4px似乎工作,但不保证工作.考虑回到替代解决方案.

Answer 4

问题:

发生这种情况是因为display设置为inline-block.

内联块是:

该元素生成一个块元素框,该框元素框将与周围的内容一起流动,就好像它是一个单独的内联框(行为很像被替换的元素)

»»在此处查看有关显示属性的更多信息:显示信息

向(S):

• 删除空格
• 负利润率
• 跳过结束标记
• 将字体大小设置为零
• 只需浮动它们
• 只需使用flexbox即可

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

战斗内联块元素之间的空间

我上面的首选解决方案是

将字体大小设置为零

因此,您的代码和我首选的解决方案是一个代码段:

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>

另外,这里有一个代码片段,您的EXACT CODE只会将font-familyfrom 更改为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的问题:

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

在网络排版中有:

• 无衬线字体

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

• 衬线

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

• 等宽字体

  所有字符宽度相同的字体.

• 行草

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

• 幻想

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

由于Arial是一种无衬线字体,因此是一种非固定宽度字体(如等宽字体),当应用于body子元素显示inline-block(不修复间隙)时,它将在子元素之间创建空间.

虽然如果你应用于font-family子元素,就像我在我的2ND SNIPPET中的DID一样,它不会再发生了.

一篇文章评论:

正如您所建议的那样,内联元素之间的差距是空格字符. 宽度取决于字体(系列,变体等),近似于 .25em

你可以在这里查看

完整的文章如下

文章