2

По непонятной причине теги <a> не применяют собственную line height, а вместо этого используют родительские line height .
Он применяется только в том случае, когда теги <a> имеют более высокую line height, чем их родительские элементы, или когда для свойства display установлено значение block.
Я что-то пропустил относительно свойства line-height?

<!DOCTYPE html>
<html>

<head>
  <style>
    .container {
      max-width: 200px;
      border: 2px black solid;
      line-height: 5;
    }
    
    .container>a {
      display: block;
      line-height: 1.5;
      width: 100%;
    }
  </style>
</head>

<body>
  <div class=container>
    <a>First</a>
    <a>Second</a>
    <a>Third</a>
    <a>Fourth</a>
  </div>
</body>

</html>

Примечание переводчика:

Этот топик выбран для перевода в качестве учебного пособия по одному из свойств CSS
Автор топика очень доходчиво, на примерах поясняет все нюансы использования line-height

2
  • 1
    ассоциация:stackoverflow.com/q/54341767/7394871 27 янв 2019 в 12:33
  • .container>a { display: block; — ну как так-то блин, отсутствие примера с inline-block сбивает с толку
    – andreymal
    29 янв 2019 в 10:22

1 ответ 1

3

line-height применяется, но вам нужно понять, как она применяется. Если мы ссылаемся на спецификацию:

В элементе контейнера блока, содержимое которого состоит из элементов inline-level, line-height задает минимальную высоту линейных блоков внутри элемента

Устанавливая line-height: 5 для родительского элемента, вы устанавливаете минимальную высоту для linebox.

На незаменяемом inline элементе line-height указывает высоту, которая используется при расчете высоты линейного блока.

Установив line-height:1,5;, вы определили высоту строки.

Чтобы объяснить это проще, - у вас есть linebox с высотой, равной 1,5, внутри linebox с высотой, равной 5, но вы не сможете это увидеть.

Если вы увеличите line-height для child и достигнете5, вы достигнете минимальной высоты и начнете увеличивать linebox, определенный родительским элементом.

Чтобы увидеть это, вам нужно применить vertical-align. Если line-height дочернего элемента меньше, чем line-height родительского элемента, вы можете выровнять:

.container {
  max-width: 200px;
  border: 2px black solid;
  line-height: 5;
}

.container>a {
  line-height: 1.5;
}
<div class="container">
  <a>First</a>
  <a style="vertical-align:top;">Second</a>
  <a>Third</a>
  <a style="vertical-align:bottom;">Fourth</a>
</div>

Если вы увеличите line-height, вы увидите, что выравнивание не будет иметь никакого эффекта, так как linebox равен по высоте linebox родителя, и нет места для вертикального выравнивания:

container {
  max-width: 200px;
  border: 2px black solid;
  line-height: 5;
}

.container>a {
  line-height: 5;
}
<div class=container>
  <a>First</a>
  <a style="vertical-align:top;">Second</a>
  <a>Third</a>
  <a style="vertical-align:bottom;">Fourth</a>
</div>

Чтобы сделать своего рода аналогию, это похоже на установку height/min-height внутри контейнера flexbox. Когда высота элемента меньше, мы можем выровнять:

.container {
  max-width: 200px;
  border: 2px black solid;
  min-height:100px;
  display:flex;
  align-items:flex-start;
}

.container>a {
  height:20px;
  background:red;
}
<div class=container>
  <a>First</a>
  <a style="align-self:center;">Second</a>
  <a>Third</a>
  <a style="align-self:flex-end;">Fourth</a>
</div>

Но когда height больше и достигает минимума, определенного родителем, выравнивать нечего, и общая высота родителя может увеличиться, если мы продолжим увеличивать высоту childs:

.container {
  max-width: 200px;
  border: 2px black solid;
  min-height:100px;
  display:flex;
  align-items:flex-start;
}

.container>a {
  height:110px;
  background:red;
}
<div class=container>
  <a>First</a>
  <a style="align-self:center;">Second</a>
  <a>Third</a>
  <a style="align-self:flex-end;">Fourth</a>
</div>

Вы также можете заметить, что вы применяете width: 100%, которое не будет влиять на inline элемент, но будет применяться к inline-block, заставляя каждый элемент размещаться на отдельной строке.

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

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

.container {
  max-width: 200px;
  border: 2px black solid;
  line-height: 5;
}

.container>a {
  line-height: 1.5;
}
.alt > a{
  display:inline-block;
  width:100%;
}
<div class=container>
  <a>First</a><br>
  <a>Second</a><br>
  <a>Third</a><br>
  <a>Fourth</a>
</div>

<div class="container alt">
  <a>First</a>
  <a>Second</a>
  <a>Third</a>
  <a>Fourth</a>
</div>
 Run code snippet

Теперь, если вы установите a в качестве элементаblock, у вас больше не будет элемента уровня inline внутри родительского контейнера, поэтому егоline-height не будет иметь никакого эффекта

.container {
  max-width: 200px;
  border: 2px black solid;
  line-height: 5;
}

.container>a {
  display: block;
  line-height: 1.5;
  width: 100%;
}
<div class=container>
  <a>First</a>
  <a>Second</a>
  <a>Third</a>
  <a>Fourth</a>
</div>

Добавьте текст внутри родительского элемента, и вы увидите, что line-height снова будет определена, чтобы определить линию, где находится текст:

.container {
  max-width: 200px;
  border: 2px black solid;
  line-height: 5;
}

.container>a {
  display: block;
  line-height: 1.5;
  width: 100%;
}
<div class=container>
  <a>First</a>
  <a>Second</a>
  <a>Third</a>
  <a>Fourth</a>
  some text
</div>

Несколько интересных вопросов:

Why is the span's line-height is useless?

I do not "get" the vertical-align css property

Why is there space between line boxes, not due to half leading?

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.