Равномерно распределить пространство в многослойном заголовке - PullRequest
Новая
       10

Равномерно распределить пространство в многослойном заголовке

1 голос
/ 19 октября 2019

Я пытаюсь воспроизвести старые стили с использованием CSS и HTML. Вот код, который я придумал. 

body {
  font-family: Palatino;
}

header {
  text-align: center;
}

h1 {
  text-transform: uppercase;
  font-weight: normal;
}

.small {
  font-size: 12pt;
  letter-spacing: .1ch;
}

.medium {
  font-size: 18pt;
  letter-spacing: .2ch;
}

.large {
  font-size: 27pt;
  letter-spacing: .3ch;
}
<h1>
  <span class="large">Officia in mollit</span><br>
  <span class="medium">elit anim ut culpa in irure</span><br>
  <span class="small">enim officia excepteur ex ad sint magna</span><br>
  <span class="large">magna ut minimu</span><br>
  <span class="medium">nisi dolore minim aute</span><br>
  <span class="small">nisi dolore minim aute laboris</span><br>
  <span class="medium">ex laboris culpa</span><br>
</h1>

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

1 Ответ

2 голосов
/ 19 октября 2019

Удалите элементы <br> и установите для элементов span значение display: block; (или замените их элементами div). Установите line-height: 1 для элемента <h1>, чтобы высота строки соответствовала размеру шрифта. 

body {
  font-family: Palatino;
}

header {
  text-align: center;
}

h1 {
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1;
}

h1 > span {
  display: block;
}

.small {
  font-size: 12pt;
  letter-spacing: .1ch;
}

.medium {
  font-size: 18pt;
  letter-spacing: .2ch;
}

.large {
  font-size: 27pt;
  letter-spacing: .3ch;
}
<h1>
  <span class="large">Officia in mollit</span>
  <span class="medium">elit anim ut culpa in irure</span>
  <span class="small">enim officia excepteur ex ad sint magna</span>
  <span class="large">magna ut minimu</span>
  <span class="medium">nisi dolore minim aute</span>
  <span class="small">nisi dolore minim aute laboris</span>
  <span class="medium">ex laboris culpa</span>
</h1>
...