我在使用em单位的填充物时遇到了问题.
我有一个带有h5标签的div
<div id="myDiv">
<h5>
my header
</h5>
</div>
并使用此css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
#myDiv{
font-size: 32px;
}
#myDiv h5{
background-color: red;
color: white;
padding: 1em;
}
我应该希望填充大小等于32px，但当我在浏览器上打开判断时 我看到根据下图计算的填充
填充大小为13.280px
但是，当我使用div或section而不是h5时，可以很好地工作.
em取决于它所在的元素的font-size.这意味着，如果你有以下几点；
.example {
font-size: 20px;
padding: 4em;
}
那么填充将是80px.
默认情况下，div和section标记的默认字体大小为16px.默认情况下，h5的字体大小为13.28 px.来源.改用h4(默认为16px)或将h5的字体大小设置为16px.
#myDiv h5{
background-color: red;
color: white;
font-size: 16px;
padding: 1em;
}
注意:这些值可能会因浏览器而略有不同.
你可以在这里看到这一点；
let h1 = document.querySelector("h1");
let div = document.querySelector("div");
let section = document.querySelector("section");
let h5 = document.querySelector("h5");
let h4 = document.querySelector("h4");
console.table({ "h1": window.getComputedStyle(h1).getPropertyValue('font-size'), "div": window.getComputedStyle(div).getPropertyValue('font-size'), "section": window.getComputedStyle(section).getPropertyValue('font-size'), "h5": window.getComputedStyle(h5).getPropertyValue('font-size'), "h4": window.getComputedStyle(h4).getPropertyValue('font-size') });<h1>Hi</h1>
<div>Hi</div>
<section>Hi</section>
<h5>Hi</h5>
<h4>Hi</h4>