0

I noticed that the following produces a larger distance between the border's bottom to the text in first element then to the rest of them.

ul{
  display: flex;
  flex-direction: row;
  list-style-type: none;
  font-size: 0;
}

li{
  display:flex;
  font-size: 1.3em;
  border: 1px solid black;
  justify-content: flex-end;
}

li:nth-child(1){ font-size: 3.6em; }

li:nth-child(n+2){ font-size: 1.3em; }

I zero'fied all the possible margins and paddings (confirming it in the browser). I tried to set font size of the parent to 0 (making the text vanish!) with the CSS below.

ul{
  display: flex;
  flex-direction: row;
  list-style-type: none;
  font-size: 0;
}

Do I have to set negative values on the li's manually? It seems not the best practice.

enter image description here

Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438

1 Answers1

1

The layout in your example is taking into account that the text could contain letters with a descender, like an f, g, q or y.

You can align the items in the flex container to the baseline using the align-items CSS property:

ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  align-items: baseline;
  gap: 1em;
}

li {
  font-size: 1.3em;
}

li:nth-child(1) { font-size: 3.6em; }

li:nth-child(n+2) { font-size: 1.3em; }
<ul>
  <li>Menu</li>
  <li>Start</li>
  <li>Runs</li>
</ul>
Robby Cornelissen
  • 91,784
  • 22
  • 134
  • 156
  • I noticed that `gap` and `vertical-align` weren't required. The mistake I made was to try baseline the individual `LI`'a instead of the `UL`. Now it does what I want, how I want. It's like McDonald's and Burger King at one: I have it my way and I'm loving it! – Konrad Viltersten May 30 '23 at 21:40
  • Indeed, the `vertical-align` was a remnant of an earlier attempt. The `gap` was just to create some separation like you had in your original image. – Robby Cornelissen May 31 '23 at 00:02