CSS中父子元素设置相同font-size但显示不同的问题

你的代码 #

CSS代码

.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;
}

HTML代码

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

原因分析 #

• 浏览器自带的默认样式表中，h1元素有预设的字体大小，一般是2em（相对单位，基于父元素的字体大小计算）。
• 只给.logo设置font-size:1.3rem时，h1会以父元素的1.3rem为基准，套用自身默认的2em，最终字体大小是 1.3rem × 2 = 2.6rem。
• 直接给.logo h1设置font-size:1.3rem时，这个值会覆盖h1的默认样式，此时字体大小就是1.3rem，所以和之前的显示效果不同。

如果想让两种设置方式得到相同的显示效果，要么给h1设置font-size:2em（和默认值一致），要么把父元素的font-size调整为目标大小的一半。

内容的提问来源于stack exchange，提问作者Martin