Ответ 1

Это происходит потому, что каждый шрифт имеет разную ширину, даже для символа пробела. Вы уже знаете о проблемах с пробелами с встроенными блоками. Итак, когда вы устанавливаете Arial, эти пробелы слегка меняют ширину шрифта браузера по умолчанию (или любого другого шрифта с разной шириной), что в моем случае Times New Roman.

Посмотрите, насколько сильно это изменение происходит при установке моноширинного шрифта.

Теперь почему происходит между 2-м и 3-м ящиками, а не 1-й и 2-й. Я уверен, что это сводится к округлению значений пикселей на основе ширины введенных слов, кажется, что в фоновом режиме присутствует псевдо-субпиксельная рендеринг, но десятичные значения округляются в конечном процессе визуализации. Посмотрите, что произойдет, если вы используете Arial и напечатайте Hell Qaru вместо Hello Qaru - пробелы выглядят одинаково. Таким образом, это просто нежелательное совпадение.

Другим моментом, который доказывает это, является проблема округления - это изменение пробелов в различных уровнях масштабирования страницы. Это довольно распространено, чтобы получить эти несоответствия пикселей в макете при работе с десятичными знаками в HTML. Масштабирование добавляет еще один этап деления/умножения, который еще больше изменяет основные значения, что приводит к совершенно непредсказуемому поведению в конечном макете.

Ответ 2

Это потому, что вы показываете кнопки в качестве элементов inline-block, и когда у вас есть встроенные элементы, пробелы значительны и отображаются таким же образом, что и промежутки между словами.

i.e встроенный блок делает пробелы значительными, поэтому будут отображаться пробелы в источнике между элементами inline-block.

Например: вы можете центрировать элементы inline-block, просто добавив text-align: center;, таким же образом используется для центрирования текста в его родительском блочном элементе. - DEMO

Почему добавление семейства шрифтов в тело влияет на пространство между кнопками?

Различные шрифты могут иметь различный интервал между словами. Если вы сравните font-family: monospace; с font-family: sans-serif;, то вы увидите, что шрифты monospace имеют больше места между словами, чем sans-serif шрифты, а также элементы inline-block таким же образом и имеют промежуток между элементами.

• Monospace DEMO

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

Ответ 3

Ответ предполагает, что DirectWrite включен. В противном случае вы не заметите указанных симптомов и дробную ширину. Предполагается также, что шрифты по умолчанию и засекреченные шрифты по умолчанию - Times New Roman и Arial.

Тот, кто сказал, что пробел имеет ширину 4 пикселя, ошибается:

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

Ответ 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>

Ответ 5

DEMO

Проблема заключается в том, что между тегами есть скрытые пространства (разрыв строки и несколько вкладок считаются пробелом, чтобы быть ясным). Минимизируйте HTML или прокомментируйте пробелы, и все будет работать правильно:

body {
  font-family: Arial;
}

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

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

Ответ 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>

Ответ 7

Я рекомендую использовать

float:left

или

float:right  

вместо

 display:inline-block; 

Ответ 8

use the below css for this: 

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