padding and margin on fonts for flex

Question

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>

`align-items: baseline`? http://jsfiddle.net/5nwsxuhv/ – Michael Benjamin Mar 16 '23 at 01:24 — Michael Benjamin, Mar 16 '23 at 01:24
https://stackoverflow.com/q/34606879/3597276 – Michael Benjamin Mar 16 '23 at 01:25 — Michael Benjamin, Mar 16 '23 at 01:25

score 0 · Answer 1 · answered Mar 16 '23 at 01:23

Is this what you mean?

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'

score 0 · Answer 2 · answered Mar 16 '23 at 01:25

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>

padding and margin on fonts for flex

2 Answers2