Question 46032 in CSS Question posted in
Some basic documentation can be found here.

padding and margin on fonts for flex – CSS

What’s the point of adding padding and margin on fonts

.center-title {
  position: absolute;
  /* top: 60%; */
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  align-content: flex-end;
  height: 300px;
}

.main {
  position: relative;
  display: inline-block;
  height: initial;
  display: flex;
  flex-direction: row;
  align-content: flex-end;
  align-items: flex-end;
}

.small {
  font-size: 1rem;
  font-family: "Crimson Text";
  font-style: italic;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  margin-bottom: 25px;
}

.big {
  font-size: 13rem;
  font-family: Jost;
  display: inline-block;
  line-height: 13rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.word {
  line-height: 1rem;
}
<div class="main">
  <span class="big">BIG</span>
  <span class="small">
        <span class="word">Sony A7III</span>
  <span class="word">16-35mm and 85mm</span>
  <span class="word">Nikon D810</span>
  <span class="word">Landscape and Moments</span>
  <span class="word">Photography and Film</span>
  </span>
  <div class="big">WORD</div>
</div>
Tags:

2

Answers


  1. 0

    Is this what you mean?

    Image

    This is the CSS:

    .small {
  font-size: 1rem;
  font-family: "Crimson Text";
  font-style: italic;
  display: inline-block;
}

.big {
  font-size: 13rem;
  font-family: Jost;
  display: inline-block;
}

    I just needed to make both small and big class names display property to be ‘inline-block’

    Login or Signup to reply.
  2. 0

    align-items: last-baseline seems to get you close, but with the smaller text inside a container it doesn’t seem to work perfectly:

    .main {
  display: flex;
  align-items: last-baseline;
}

.small {
  font-size: 1rem;
  font-family: "Crimson Text";
  font-style: italic;
}

.big {
  font-size: 13rem;
  font-family: Jost;
}
    <div class="main">
  <span class="big">BIG</span>
  <span class="small">
    <span class="word">Sony A7III</span>
  <span class="word">16-35mm and 85mm</span>
  <span class="word">Nikon D810</span>
  <span class="word">Landscape and Moments</span>
  <span class="word">Photography and Film</span>
  </span>
  <div class="big">WORD</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search