Почему x-overflow: hidden вызывает дополнительное пространство ниже?

Ответ 1

Модель визуального форматирования - 9.4.1 Контексты форматирования блоков

Поплавки, абсолютно позиционированные элементы, блокировать контейнеры (например, встроенные блоки, таблицы-ячейки и заголовки таблиц), которые не являются блочными блоками, и блокировать блоки с 'переполнением' кроме "видимого" (кроме случаев, когда это значение было распространено в окне просмотра), установите для него содержимое контекстов форматирования блоков.

Более конкретно, новый контекст форматирования блока устанавливается при изменении свойства переполнения. По умолчанию значение свойства vertical-align элемента baseline. Вы можете просто изменить это на что-то вроде top, чтобы исправить это.

Обновленный пример

span.yavbc-color-tip span {
    display: inline-block;
    padding: 3px;
    border-radius: 8px;   
    border: none;
    background-color:#005e8e;
    color:#7cd3ff;
    overflow-x: hidden; /* This gives extra space under this span. Why? */
    vertical-align:top;
}

Обратите внимание, что это не происходит, если отображение элемента не изменено на inline-block? Это не происходит с inline элементами - пример, демонстрируя это.

Ответ 2

Несмотря на приведенную выше цитату в принятом ответе, это поведение не имеет ничего общего с блочным форматированием контекста и с "блочной" частью значения inline-block. Это все о "встроенной" части.

Все элементы inline-* участвуют в контексте форматирования форматирования. Это означает, что они помещаются внутри так называемых "линейных ящиков" вместе с текстом и другими элементами уровня inline-. Эти элементы и текст выровнены друг с другом, поэтому высота каждой строки строки вычисляется от верхней части самого высокого элемента до нижней части нижней.

По умолчанию элементы уровня inline- выравниваются по базовой линии их шрифтов (см. Первую строку в примере ниже). Даже если родительский элемент не имеет фактического текста, позиция базовой линии и минимальная высота строки строки вычисляются так, как если бы она имела текст (спецификация называет этот "мнимый" текст "стойкой" элемента). Поэтому поле линии всегда имеет некоторое пространство над базовой линией (для подставок шрифта и диакритики) и ниже (для шрифтов descenders) - см. Вторую строку примера.

inline-block часть для inline-block заключается в том, что свойство overflow меняет то, что считается базовым для этих элементов (конец раздела 10.8.1 спецификации):

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

Таким образом, в то время как технически пространство ниже базовой линии всегда зарезервировано, с overflow: visible умолчанию overflow: visible, элемент блока inline- помещается так, чтобы его базовая линия текста была выровнена с исходной базой, а нижняя часть была перемещена ниже нее. Во многих случаях это inline- блокирует самый нижний элемент в строке, поэтому пространство, зарезервированное для descenders шрифта, не отображается. Однако изменение значения overflow делает весь элемент рендерингом выше базовой линии (например, элемент <img>), делая все это пространство видимым.

p {
  margin: .5em;
  font: 32px/1.5 serif;
  color: #fff;
  background: #888;
}

span {
  display: inline-block;
  font: 12px/1 sans-serif;
  background: #fff;
  color: #000;
  padding: 2px;
  border: 1px solid green;
}

.ovh {
  overflow: hidden;
  border-color: red;
}

<p>Text with image <img src="http://via.placeholder.com/30x15"> and <span>two</span> <span>inline-block</span>s</p>

<p><img src="http://via.placeholder.com/30x15"> <span>only</span> <span>inline-blocks</span></p>

<p><img src="http://via.placeholder.com/30x15"> <span>regular</span>, the <span class="ovh">overflowed</span> trick</p>