Почему базовый элемент `inline-block` с` overflow: hidden` установлен на его нижнее поле?

Ответ 1

1. Какова причина изменения базовой линии элемента inline-block от базовой линии его строки до края нижнего поля?

Базовый уровень "встроенного блока" изменяется на его край нижнего края, когда его свойство overflow установлено на hidden (полная спецификация здесь).

Что касается причины этого решения, я думаю, что, поскольку переполненная часть скрыта, пользовательские агенты (браузеры) могут выбрать визуализацию этой части, а не ее отображение, или вообще не отображать ее. И , когда переполненная часть не отображается, пользовательские агенты не имеют возможности рассказать о базовой линии своего последнего окна строки, поскольку она не отображается, где она идет, неизвестно.

Если базовая линия 'inline-block', для которой overflow установлена ​​hidden, по-прежнему сохраняется как базовая линия последнего окна строки, пользовательские агенты вынуждены визуализировать то, что скрыто для пользователя, которое могут препятствовать производительности или, по крайней мере, устанавливать дополнительные ограничения для пользовательских агентов. Более того, в этом случае другие встроенные тексты в одном поле строки выровнены с такой базой, где скрыты тексты вокруг скрытого скрытого от переполнения поля, который является видом stange и не интуитивно понятным.

Я сделал простую демонстрационную эмуляцию того, что встроенный блок с скрытым переполнением все еще имеет базовую линию, установленную в базовую линию последнего блока строки.

var isOverflowHidden = false;
document.querySelector('button').onclick = function() {
  document.getElementById('inline-box').style.overflow = isOverflowHidden ? '' : 'hidden';
  isOverflowHidden = !isOverflowHidden;
}

html { background: white; }
#inline-box { display: inline-block; height: 18px; }
.overflown { color: white; }

<p><button id="toggle">Toggle 'overflow: hidden;' on 'inline-block'</button></p>

<span>
  texts sit
  <span id="inline-box">
    texts in inline-block <br>
    <span class="overflown">
      line 2 <br>
      line 3
    </span>
  </span>
  on baseline
</span>

Ответ 2

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

<style>
.main_div {
    display:table;
    border-collapse:collapse;
    width:100%;
    border:1px solid red;
}
.main_div span {
    display:table-cell;
    border:1px solid black;
    height:20px;
    border:1px solid green;
}

</style>
<div class="main_div">
    <span class="one">one</span>
    <span class="two">two</span>
    <span class="three">three</span>
</div>

Ответ 3

@timur: Прежде всего, хороший вопрос.

Я не знаю, ответит ли он на ваш вопрос, но я хотел бы поговорить о каком-то аспекте поведения элементов "встроенного блока".

Прежде всего, элементы "inline-block" действуют в соответствии с его элементами и его содержимым.

Если есть два div, один у другого и оба имеют отображение: inline-block; property: value, то это будет зависеть от содержимого внутри каждого div и начнет отображать контент из базовой линии, что является естественным поведением "элемента встроенного блока".

Теперь позвольте мне объяснить вам поведение свойства "переполнение".

По умолчанию свойство переполнения является "Видимым", и его зависимым свойством является "overflow-wrap: normal;". Кроме того, он применяется только к элементам "block" и "inline-block" , потому что встроенные элементы - это те элементы, которые переносятся в текст, и нет пробелов внутри содержимого, чтобы остановить переполнение.

Таким образом, диапазон в приведенном вами примере должен быть "блокировать" ИЛИ "встроенный блок" для применения переполнения и выравнивания по вертикали.

Если вы посмотрите на эту скрипту --- > http://jsfiddle.net/Lkyd1kr0/1/, где я использовал "встроенный блок" для второго элемента span.

HTML

<div class="one"><span>as</span></div><div class="two"><span>asd</span></div>

CSS

.one,.two { 
width: 200px;
display: inline-block ;

}

.one { border: 2px solid #f00; }
.two { border: 2px solid #000; }

.one span { display: block; }

.two span { 
    display: inline-block;
    overflow:hidden;
}

Теперь просто используйте инструменты веб-разработчика и наведите указатель мыши на div.two и div.two > span и проверьте разницу в высоте.

Это связано с тем, что span - это содержимое div.two, который встроенный блок, а остальная часть пространства на высоте div. два закреплены для остальной части содержимого, которая представляет собой пробел. Такое поведение вы обычно видите на элементах уровня "block" и "inline-block" .

Также обратите внимание на "transform-origin" как "span", так и "div.two", он будет иметь 4px разницы по оси y.

Ответ 4

Это не будет похоже на ответ, но я нашел очень интересную вещь на этом примере.

Если мы возьмем lool до #firstDiv, мы увидим некоторый - margin в нижней части. Но я думаю, что это поле взято с высоты горизонтальной полосы прокрутки.

Я беру его высоту, высота около 14px;

Затем возьмите высоту верхнего края out inline-block с overflow: hidden, это 15px, и без overflow: hidden он будет около 30px.

Это совпадение? Я не думаю. Тот же трюк будет с большей высотой #container.

P.S. Этот ответ не претендует на ответ, я просто не мог бы выразить все это в комментарии. Я не знаю, как все это связано, я только это заметил. Спасибо за понимание.

Ответ 5

1. Какова причина изменения базовой линии элемента inline-block от базовой линии его строки до края нижнего поля?

Его значение по умолчанию line-height или нормальная строка-высота его родительского объекта, унаследованного от элемента inline-block или значения по умолчанию, заданного пользовательским агентом, который, кстати, рекомендован W3C line-height:normal.

Ссылка здесь

http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height говорит

нормальный

Сообщает агентам пользователя, чтобы установить используемое значение в "разумное" значение на основе на шрифте элемента. Значение имеет то же значение, что и.

Мы рекомендуем использовать значение "normal" между 1.0 и 1.2.   вычисленное значение является "нормальным".

Итак, мы знаем, что значение по умолчанию - line-height:normal, и оно наследуется. Теперь мы знаем, что inline-block добавляет элемент height-height и позволяет видеть, что происходит при переполнении: hidden установлен

W3C - Overflow говорит

• скрыт

Содержимое обрезается и не предоставляется полоса прокрутки.

переполнение: скрытое и отображение: встроенный блок создает пространство для подвешивающих символов, таких как pgy. поскольку он является блочным и встроенным, переполнение сохраняет как пространство для зависающих символов, которые могут появиться, так и высоту строки.

2. Как вычислить этот сдвиг?

его браузер специфичен, и поэтому нам нужно будет указать спецификацию браузера

Смотрите здесь, чтобы узнать значение "normal"

mozilla

Initial value normal
Inherited yes

нормальный    Зависит от агента пользователя. Настольные браузеры (включая Firefox) используют значение по умолчанию примерно 1.2, в зависимости от элемента семейство шрифтов.

Чтобы понять изображение, см. HTML CSS ниже

Второй div и второй Div Span имеют строку-height: normal (обычно 1,2), потому что нормальна наследуется как не определенная.

Третий div и третий Div Span имеют высоту строки: 40px, которая определена. Значение третьей высоты строки div по умолчанию было унаследовано также и встроенными дочерними элементами.

CSS/Properties/display говорит

• inline-block Вызывает элемент для создания контейнера блока на уровне строки. Внутренняя часть встроенного блока форматируется как блок-блок, а сам элемент отформатирован как атомный встроенный ящик.

Поскольку термин inline говорит, что это означает, что элемент является встроенным элементом, а блок означает его блок. поэтому вместе это означает, что элемент блока, определенный в одной строке вот пример доказательства, который показывает три ситуации По умолчанию DIV является элементом уровня блока, а SPAN является встроенным элементом. Дополнительная информация здесь HTML-блок и встроенные элементы

<style>
.first-div{
    border:#F00 1px solid;
}
.first-div span{
    /**by default span is an inline element.**/
    border:#093 1px solid;
}
.second-div{
    /** line-height not defined default line height will be used **/
    border:#F00 1px solid;
}
.second-div span{
    /** default line height inherited from the secod-div **/
    display:inline-block;
    border:#093 1px solid;
    overflow:hidden;
}
.third-div{
    border:#F00 1px solid;
    /**see line height. we change the default line height**/
    line-height:40px;
}
.third-div span{
    /**see line height. line height 40px set in the parent will be used**/
    display:inline-block;
    border:#093 1px solid;
    overflow:hidden;
}
</style>
<div class="first-div">
First Div
<span>First Span</span>
</div>
<br/>
<div class="second-div">
Second Div
<span>Second Span</span>
</div>
<br/>
<div class="third-div">
Third Div
<span>Third Span</span>
</div>