Isu saiz fon antara CSS elemen ibu bapa dan anak

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>

Apabila saya menukar saiz fon dalam pemilih .logo, saya dapat melihat bahawa elemen h1 saya menjadi lebih besar. Walau bagaimanapun, apabila saya melakukan perkara yang sama tetapi kini dalam pemilih .logo h1, saiznya berbeza. Ambil perhatian bahawa saya menggunakan saiz fon yang sama untuk kedua-dua kes. Saya tidak tahu apa yang berlaku.

Answer 1

1 rem adalah sama dengan saiz fon unsur akar. Sebagai contoh, jika saiz fon elemen akar ditetapkan kepada 16px, maka 1rem adalah sama dengan 16px.

Menggunakan unit rem menjadikannya lebih mudah untuk mencipta reka bentuk responsif kerana ia membolehkan anda menetapkan saiz berbanding elemen akar dan bukannya menggunakan nilai piksel mutlak. Ini bermakna jika pengguna menukar saiz fon lalai dalam tetapan penyemak imbas mereka, tapak web anda akan tetap kelihatan betul secara proporsional.

Answer 2

Anda boleh menggunakan alat DevTools Inspector penyemak imbas anda untuk melihat dengan tepat siapa/di mana saiz fon ditetapkan.

Jika saiz fon dalam induk ditetapkan kepada 1.3rem, saiz em ditetapkan.

Anaknya (h1) tidak menetapkan saiz fon yang anda tetapkan secara eksplisit, jadi ia mengambil saiz fon yang ditetapkan oleh penyemak imbas. Dalam contoh ini, saya menetapkan saiz fon h1 kepada 1.5em.

Jadi saiz fon dalam h1 menjadi 1.5 * 1.3rem

Dalam kes kedua, anda mengatasinya dengan menetapkan secara khusus saiz fon lalai h1 kepada 1.3rem (kurang daripada 1.5 * 1.3rem).