我有 2 个 div 框，我希望文本与框的高度相同。
我尝试将字体大小和框高度设置为 2rem。显然，这不是我使文本和框具有相同高度的方式。
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Grid starting point</title>
<style>
:root {
font-size: 1em;
}
.offer {
font-size: 2rem;
display: inline-block;
}
.box {
width: 2rem;
height: 2rem;
background-color: #990000;
display: inline-block;
}
</style>
</head>
<body>
<header>
<div class="offer">CARS FOR SALE</div>
<div class="box"></div>
</header>
</body>
</html>::afteraspect-ratio正如评论所指出的，文本增加了父级
divline-heightfont-size.offer {
position: relative;
font-size: 2rem;
line-height: 1.5rem;
}
.offer::after {
content: "";
height: 100%;
aspect-ratio: 1 / 1;
background-color: #990000;
position: absolute;
}<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Grid starting point</title>
</head>
<body>
<header>
<div class="offer">CARS FOR SALE</div>
</header>
</body>
</html>注意：感谢 César Venzac 指出这个讨论更改行高的 SO 链接。