如何对齐在顶部以不同字体大小显示的两个 p 元素？

Question

我必须内联具有不同字体大小的 p 元素，并希望它们在顶部对齐，以便它们的边缘匹配。

这是如何实现的？

<!doctype html>
<html>
<head>
<style>
body {border:0.1em red solid; width:100%; padding:5em;}
p {display:inline; vertical-align:top}
.big {font-size:9em; }
.text {font-size:2em; }
.container{height:15em;}
</style>
<meta charset="UTF-8">
<title>Text Align</title>
</head>

<body>

<p class="big">x</p><p class="text"> HELLO WORLD</p>


</body>
</html>

更新：

这是一个更真实的示例中的代码。在调整行高时，我无法将它们移到页脚容器的上边缘。

    <!doctype html>
<html>
<head>
<style>
body {border:0.1em red solid; width:600px; padding:1em; }
 p {display:inline-table; vertical-align:top; padding:0em; margin:0em; background-color:red;}
.big {font-size:9em; line-height:35px; padding:0em;}
.text {font-size:2em;}
.footer {background-color:green; padding:0em; line-height:1.7em; height:auto; overflow:hidden;}
.area {background-color:yellow; height:500px; margin-bottom:1em; padding:0em;}
</style>
<meta charset="UTF-8">
<title>Text Align</title>
</head>

<body>
<div class="area">
</div>
<div class="footer" >
<div style="margin:5em auto; display:table;">
<p class="big">x</p>
<p class="text"> HELLO WORLD</p>
</div>
</div>

</body>
</html>

Answer 1

由于您不能使用 CSS 自动调整它，我建议您手动调整。

更多详情on the reason see this link

使用line-height: 49px; 或line-height: .35em; 匹配这些p 元素

<!doctype html>
<html>
<head>
<style>
body {border:0.1em red solid; width:100%; padding:5em;}
p {display:inline; vertical-align:top}
.big {font-size:9em; line-height: 49px; }
.text {font-size:2em; }
.container{height:15em;}
</style>
<meta charset="UTF-8">
<title>Text Align</title>
</head>

<body>

<p class="big">x</p><p class="text"> HELLO WORLD</p>


</body>
</html>

更新：-

将margin-top:0; 添加到.text 和padding:0em 1em 1em 1em; .big。因为line-height会影响.big的高度

<!doctype html>
<html>
<head>
<style>
body {border:0.1em red solid; width:600px; padding:1em; }
 p {display:inline-block; vertical-align:top;}
.big {font-size:9em; padding-top:0em; margin:0em; line-height:0.35em}
.text {font-size:2em;margin-top:0;}
.footer {background-color:green; overflow:hidden; padding:0em 1em 1em 1em;}
.area {background-color:yellow; height:500px; margin-bottom:1em; padding:0em;}
</style>
<meta charset="UTF-8">
<title>Text Align</title>
</head>

<body>
<div class="area">
</div>
<div class="footer" >
<p class="big">x</p>
<p class="text"> HELLO WORLD</p>
</div>

</body>
</html>