首先,让我们看一段代码:
div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { line-height:1.7; }Run Code Online (Sandbox Code Playgroud)
<div><span>123<br>456<br>789<br>000</span></div>Run Code Online (Sandbox Code Playgroud)
为什么是span的line-height未使用的?
将line-height仍然是200px,但是当我们设置span的display属性inline-block时,line-height的span使用?
见下文:
div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { display:inline-block; line-height:1.7; }Run Code Online (Sandbox Code Playgroud)
<div><span>123<br>456<br>789<br>000</span>Run Code Online (Sandbox Code Playgroud)
给定以下 HTML,<p>元素的总高度是多少?我认为它会是 1em,但似乎并非如此。低于基线的字母似乎位于某种延伸到字体高度以下的边距上。
<html>
<head>
<style>
p {
margin: 0;
padding: 0;
font-size: 1em;
font-family: serif;
border: 1px solid black;
}
</style>
</head>
<body>
<p>Lorem ipsum.</p>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)