父元素和子元素CSS之間的字體大小問題

Question

.logo{
width: 25%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.3rem;
border: 2px solid gold;
}

.logo h1{
margin-left: 1vw;
/*font-size: 1.3rem;*/
border: 2px solid red;
}

<section id="l" class="logo">
            <i class="fa-solid fa-dragon"></i>
            <h1>Blog</h1>
</section>

當我更改 .logo 選擇器中的字體大小時，我可以看到我的 h1 元素變大了。但是，當我執行相同操作但現在在 .logo h1 選擇器中，大小不同。請注意，對於這兩種情況，我都使用相同的字體大小。我不知道發生了什麼事。

Answer 1

1 rem 等於根元素的字體大小。例如，如果根元素的font-size設定為16px，那麼1rem就等於16px。

使用 rem 單位可以更輕鬆地建立響應式設計，因為它允許您設定相對於根元素的大小，而不是使用絕對像素值。這意味著，如果使用者更改瀏覽器設定中的預設字體大小，您的網站看起來仍然按比例正確。

Answer 2

您可以使用瀏覽器的開發工具檢查工具來準確地查看字體大小的設定者/位置。

如果父級中的 font-size 設定為 1.3rem，即設定 em 大小。

它的子級（h1）沒有明確設定您設定的字體大小，因此它會採用瀏覽器設定的字體大小。在這個例子中，我將 h1 的字體大小設為 1.5em。

因此 h1 中的 font-size 變成 1.5 * 1.3rem

在第二種情況下，您透過將 h1 的預設字體大小專門設定為 1.3rem（小於 1.5 * 1.3rem）來覆寫它。