Как выровнять текст по нижнему краю блока?

Question

Всем привет! Такая проблема: нужно выровнять текст по нижнему краю блока, как на макете: какзалось бы, что всё просто, но дело в том, что при увеличении шрифта, каким-то образом увеличиваются отступы текста. И это при том, что я обнулили значения padding и margin для всех блочных элементов. Вот что получается:

.AVE-section-brand {
  background: url(https://picsum.photos/1000/600) #5b6265;
  background-blend-mode: multiply;
  background-position-y: -100px;
}

.AVE-section-brand .description {
  position: relative;
}

.AVE-section-brand .description p {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 95%;
  margin: 0 auto;
}

.AVE-section-brand .description p span {
  display: block;
  width: 31%;
  padding-top: 120px;
  font-size: 28.13em;
  color: #5e5e5e;
  text-align: right;
  font-weight: bold;
}

.AVE-section-brand .description p span:nth-child(2) {
  text-align: center;
}

.AVE-section-brand .description p span:nth-last-child() {
  text-align: right;
}

<div class="AVE-section-brand">
  <div class="container-expand">
    <div class="description">
      <p>
        <span class="letter">A</span>
        <span class="letter">V</span>
        <span class="letter">E</span>
      </p>
    </div>
  </div>
</div>

Answer 1

Например так.
В коде я использовал относительную единицу измерения vw
1 vw = 1% ширины экрана

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

body,
html {
  height: 100%;
}

:root {
  --introColor: rgba(0, 0, 0, 0.5); /* цвет, который наложится на картинку */
}

.intro {
  color: white;
  background: url(https://picsum.photos/1000/600) no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
  height: 100%;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.intro::before {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background-color: var(--introColor);
}

.intro__inner {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
}


/**/

.intro__text {
  font-size: 25vw;
  letter-spacing: 5vw;
  line-height: 17.5vw;
}

<div class="intro">
  <div class="intro__inner">
    <div class="intro__text">AVE</div>
  </div>
</div>

БЛОГ НА HUSL

Как выровнять текст по нижнему краю блока?

Ответы (1 шт):