Высота Лайн-бокса

[aqua.77]

<p class="q1">123333hjk</p> <p class="q2">333hjk<br>333hjk<br>333hjk<br>333hjk<br></p>

*{
	margin:0;
	padding:0;
}
.q1{
	border:1px black solid;
	display:inline-block;
	height:70px;
	line-height:50px;
}
.q2{
	border:1px black solid;
	display:inline-block;
	height:70px;
	line-height:10px;
}

Высота строки у q1 больше чем у q2 Но почему тогда самый высокий инлайн-бокс у q2, и базовая линия подтягиватся к нему? 

[Sensei]

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

На каждую строку создается свой отдельный лайн-бокс.

И базовой линией inline-block считается базовая линия последнего лайн-бокса внутри него.

https://jsfiddle.net/g0LLsy1e/

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

[aqua.77]

2 часа назад, Sensei сказал:

На каждую строку создается свой отдельный лайн-бокс.

Ну да, в моём примере 1 строка, соответственно 1 лайн-бокс. 

 

2 часа назад, Sensei сказал:

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

Так происходит потому-что высота лайн-бокса расширилась до размеров второго блока, хотя высота строки у первого блока больше.... Или вы хотите сказать что высота строк суммируется, и если у второго блока высота строки 10рх, а строк 4 (соответственно и лайн-боксов) то в сумме получается лайн-бокс растянулся до 40рх?

[Sensei]

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

[SelenIT]

Общий лайн-бокс (контейнер строки, содержащей оба инлайн-блока) всё же растянулся-таки. Чтоб вместить нижнюю часть первого инлайн-блока + с его нижним margin-ом и верхнюю часть второго инлайн-блока с его верхним margin-ом.