html - 为什么 `font-size` 不等于 `height` ？所以在右边，如果 是 2rem，在右边我可以有 2 个小的 ，每个 1rem

Question

我怎样才能做这样的布局？

basically,
I have 2 containers in flexbox:

• first one with text "33"
• the second one is a grid container:
  • the first one in the grid is "EUR"
  • the second one in the grid is ".49"

根据这个描述，我尝试使用这段代码在 HTML 中编写一个结构

<nav>
  <div class="item">
    <span class="date">Dom 07 Ago</span>

    <div class="price-container">
      <div class="first-price-container">
        <span class="price-big"> 371 </span>
      </div>

      <div class="second-price-container">
        <span class="currency">EUR</span>
        <span class="price-small"> 74 </span>
      </div>
    </div>
  </div>
</nav>

我尝试为此使用 CSS，但这就是我得到的结果。完全不正确，因为我希望 33 的高度与网格布局完全相同:

here CSS code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
  box-sizing: border-box;
}

nav {
  --small-font: 1rem;
  font-family: poppins;
  display: flex;
  gap: 1rem;
  /* space between copies of the container .item */
}

.item {
  display: grid;
}

.price-container {
  display: flex;
}

.second-price-container {
  display: grid;
  font-size: var(--small-font);
}

.price-big {
  font-size: calc(var(--small-font) * 2);
  /* I think that since the grid layout has two text with 1rem height, it will be 2rem (but not seems to work) */
  font-weight: bold;
}

.price-small::before {
  content: ".";
}

.item .date {
  color: blue;
}

<nav>
  <div class="item">
    <span class="date">Dom 07 Ago</span>

    <div class="price-container">
      <div class="first-price-container">
        <span class="price-big"> 37 </span>
      </div>

      <div class="second-price-container">
        <span class="currency">EUR</span>
        <span class="price-small"> 49 </span>
      </div>
    </div>
  </div>

  <div class="item">
    <span class="date">Dom 07 Ago</span>

    <div class="price-container">
      <div class="first-price-container">
        <span class="price-big"> 37 </span>
      </div>

      <div class="second-price-container">
        <span class="currency">EUR</span>
        <span class="price-small"> 49 </span>
      </div>
    </div>
  </div>

  <div class="item">
    <span class="date">Dom 07 Ago</span>

    <div class="price-container">
      <div class="first-price-container">
        <span class="price-big"> 37 </span>
      </div>

      <div class="second-price-container">
        <span class="currency">EUR</span>
        <span class="price-small"> 49 </span>
      </div>
    </div>
  </div>
  <!-- and soo on... repeatedly, however after I will find the correct structure, I will create a function in javascript that generate it -->
</nav>

在代码中，我认为如果我有两个元素为 1rem font-size，
然后在右边，如果我在它附近插入另一个文本，我写了 1rem+1rem 的添加，使其与网格布局的高度相同。

似乎网格布局中的元素之间没有正确的间隙。

---

此外，另一种尝试是不做 1rem+1rem ，我增加了很多 1rem*5 ，但问题仍然存在，
所以我认为如果 font-size 变大，那么右边的其他元素也会变大。

---

请帮忙，这对我来说似乎并不明显。 (因为这不会发生在 height 属性上，只有 font-size 才会出错)

问题:

是否有制作 font-size == height 的公式？这样我就可以在没有大量代码的情况下拥有像素完美的设计。

现在我将添加另一个代码来告诉你我想要它的样子

使用 height 更容易，使用 grid 和 flex。

因此它需要像您看到的图像一样，但带有字体。

如您所见，右侧其他两个元素的高度是正确的。

示例代码(仅作示例)

nav {
  display: flex;
}

.item {
  /* square */
  height: 10rem;
  width: 10rem;
  display: flex;
}

.item>* {
  flex: 1;
}

.another {
  display: grid;
}

<nav>
  <div class="item">
    <div class="big" style="background-color: red;"></div>
    <div class="another">
      <div class="small" style="background-color: yellow;"></div>
      <div class="small" style="background-color: green;"></div>
    </div>
  </div>
</nav>

Answer 1

字体大小不是高度。

字体大小 * 行高 == 高度

我只是将 line-height: 1 添加到您的 .price-container

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
  box-sizing: border-box;
}

nav {
  --small-font: 1rem;
  font-family: poppins;
  display: flex;
  gap: 1rem;
  /* space between copies of the container .item */
}

.item {
  display: grid;
}

.price-container {
  display: flex;
  line-height: 1;
}

.second-price-container {
  display: grid;
  font-size: var(--small-font);
}

.price-big {
  font-size: calc(var(--small-font) * 2);
  /* I think that since the grid layout has two text with 1rem height, it will be 2rem (but not seems to work) */
  font-weight: bold;
}

.price-small::before {
  content: ".";
}

.item .date {
  color: blue;
}

<nav>
  <div class="item">
    <span class="date">Dom 07 Ago</span>

    <div class="price-container">
      <div class="first-price-container">
        <span class="price-big"> 37 </span>
      </div>

      <div class="second-price-container">
        <span class="currency">EUR</span>
        <span class="price-small"> 49 </span>
      </div>
    </div>
  </div>

  <div class="item">
    <span class="date">Dom 07 Ago</span>

    <div class="price-container">
      <div class="first-price-container">
        <span class="price-big"> 37 </span>
      </div>

      <div class="second-price-container">
        <span class="currency">EUR</span>
        <span class="price-small"> 49 </span>
      </div>
    </div>
  </div>

  <div class="item">
    <span class="date">Dom 07 Ago</span>

    <div class="price-container">
      <div class="first-price-container">
        <span class="price-big"> 37 </span>
      </div>

      <div class="second-price-container">
        <span class="currency">EUR</span>
        <span class="price-small"> 49 </span>
      </div>
    </div>
  </div>
  <!-- and soo on... repeatedly, however after I will find the correct structure, I will create a function in javascript that generate it -->
</nav>