Является ли высота строки: 1,4 такой же, как высота строки: 140%? - PullRequest
Новая
       22

Является ли высота строки: 1,4 такой же, как высота строки: 140%?

3 голосов
/ 07 февраля 2020

Является ли использование значения line-height 1,4 таким же, как использование значения line-height 140%? Другими словами, можем ли мы считать единичную стоимость такой же, как процентное значение?

Ответы [ 2 ]

4 голосов
/ 07 февраля 2020

Не существует точно 1 одинаковых из-за наследования, вот тривиальный пример. 

.box {
  display: inline-block;
  border: 1px solid green;
}

.box > span {
  font-size: 50px;
  border: 1px solid red;
}

.box > span > span{
  font-size: 50%;
  border: 1px solid red;
}
<div class="box">
  <span style="line-height:1.8;"><span>some text here</span></span>
</div>

<div class="box">
  <span style="line-height:180%;"><span>some text here</span></span>
</div>

В первом случае последний интервал будет иметь значение line-height, равное 45px, равное 1.8 * (50% of 50px), где 1.8 - это унаследованное значение line-height от его родителя. Во втором случае последний диапазон будет иметь значение, равное 90px, равное 180% of 50px, где все значение наследуется от его родителя.

Другими словами, первый диапазон получает 1.8 затем будет считать его font-size, в то время как второй диапазон получит вычисленное значение от своего родителя, а font-size ничего не изменит.

<number>

Используемое значение свойство это число, умноженное на размер шрифта элемента. Отрицательные значения незаконны. Расчетное значение совпадает с указанным значением.

<percentage>

Расчетное значение свойства - это процент, умноженный на вычисленный шрифт элемента размер . Отрицательные значения незаконны. ref

Обратите внимание, что в обоих случаях вычисленное значение не одинаково, что делает наследование различным в обоих случаях.

Чтобы лучше проиллюстрировать процентный случай: 

.box {
  display: inline-block;
  border: 1px solid green;
}

.box > span {
  font-size: 50px;
  border: 1px solid red;
  line-height: 180%;
}

.box > span > span {
  border: 1px solid red;
}
<div class="box">
  <span ><span style="font-size:50px;">some text </span></span>
</div>

<div class="box">
  <span ><span style="font-size:50%;">some text </span></span>
</div>
<div class="box">
  <span ><span style="font-size:20px;">some text </span></span>
</div>

<div class="box">
  <span ><span style="font-size:5px;">some text </span></span>
</div>

Если вы осмотрите элементы, вы можете ясно увидеть, как во всех случаях значение line-height равно 90px

Обратитесь к этому вопросу, чтобы понять, почему высота рамки увеличивается: Почему высота будет увеличиваться при уменьшении размера шрифта?

Если мы рассмотрим значение без единиц измерения, у нас будет другой результат : 

.box {
  display: inline-block;
  border: 1px solid green;
}

.box > span {
  font-size: 50px;
  border: 1px solid red;
  line-height: 1.8;
}

.box > span > span {
  border: 1px solid red;
}
<div class="box">
  <span ><span style="font-size:50px;">some text </span></span>
</div>

<div class="box">
  <span ><span style="font-size:50%;">some text </span></span>
</div>
<div class="box">
  <span ><span style="font-size:20px;">some text </span></span>
</div>

<div class="box">
  <span ><span style="font-size:5px;">some text </span></span>
</div>

1 Если мы опускаем факт наследования и рассматриваем только тот элемент, для которого явно установлен line-height тогда мы можем сказать, что оба одинаковы, поскольку они дадут одинаковый результат для соответствующего элемента.

0 голосов
/ 07 февраля 2020

Нет .

Значения без единиц измерения рассчитываются на основе font-size элемента:

<number> (без единиц) ) Используемое значение - это безразмерное умножение на собственный размер шрифта элемента. Вычисленное значение совпадает с указанным. В большинстве случаев это предпочтительный способ установить высоту строки и избежать неожиданных результатов из-за наследования.

И наоборот, процентные значения просто корректируют line-height на основе вычисленного line-height , Таким образом, если у вас есть line-height, равный 10px, он преобразуется в 14px, если вы используете line-height: 140%.

...