内联元素上的某些行高值会导致奇怪的容器高度

问题描述 投票：0回答：1

考虑以下代码（包含在块级 中的内联

）：

<div>
    <span style="font-size:40px;line-height:3px;">HELLO</span>
</div>

这将导致

的高度为 19px。浏览器是如何得出 19px 这个值的？

以下代码片段是正在运行的代码：

<!doctype html>
<html lang="en" style="font-family:'Arial';">
<head>
    <meta charset="utf-8"/>
    <title>Line-Height Test</title>
</head>
<body style="padding-top:50px;padding-right:calc(100% - 300px);">
<div id="greenDiv" style="background-color:lightgreen;">
    <span style="font-size:40px;line-height:3px;">HELLO</span>
</div>
<div id="infoDiv" style="margin-top:20px;"></div>
<script>
    (() => {
        const infoDiv = document.getElementById("infoDiv");
        const greenDiv = document.getElementById("greenDiv");
        let html = `The inner &lt;span&gt; is ${greenDiv.firstElementChild.offsetHeight}px tall,`;
        html += ` but its container (the outer green &lt;div&gt;) is only ${greenDiv.offsetHeight}px tall.`;
        html += `<br/>How did the browser arrive at this ${greenDiv.offsetHeight}px value?`;
        infoDiv.innerHTML = html;
    })();
</script>
</body>
</html>

为了更好地理解，使 

line-height
等于 
0
，您将获得等于 
18px
的 div 高度。 div 的默认 
font-size
等于 
16px
，默认 
line-height
等于 
normal
。 
normal
值基于字体，在本例中，它似乎等于 
1.125
以获得 
18px = 1.125 * 16px

<!doctype html>
<html lang="en" style="font-family:'Arial';">
<head>
    <meta charset="utf-8"/>
    <title>Line-Height Test</title>
</head>
<body style="padding-top:50px;padding-right:calc(100% - 300px);">
<div id="greenDiv" style="background-color:lightgreen;">
    <span style="font-size:40px;line-height:0;">HELLO</span>
</div>
<div id="infoDiv" style="margin-top:20px;"></div>
<script>
    (() => {
        const infoDiv = document.getElementById("infoDiv");
        const greenDiv = document.getElementById("greenDiv");
        let html = `The inner &lt;span&gt; is ${greenDiv.firstElementChild.offsetHeight}px tall,`;
        html += ` but its container (the outer green &lt;div&gt;) is only ${greenDiv.offsetHeight}px tall.`;
        html += `<br/>How did the browser arrive at this ${greenDiv.offsetHeight}px value?`;
        infoDiv.innerHTML = html;
    })();
</script>
</body>
</html>

现在，如果您开始增加跨度的

line-height
，则 div 的高度将由于垂直对齐而增加。这有点棘手，因为我们需要一些复杂的计算来确定最终高度，但如果将跨度的对齐方式更改为与 
baseline
（默认对齐方式）不同的值，则高度将返回到 
18px
，无论 
 line-height

<!doctype html>
<html lang="en" style="font-family:'Arial';">
<head>
    <meta charset="utf-8"/>
    <title>Line-Height Test</title>
</head>
<body style="padding-top:50px;padding-right:calc(100% - 300px);">
<div id="greenDiv" style="background-color:lightgreen;">
    <span style="font-size:40px;line-height:18px;vertical-align: top">HELLO</span>
</div>
<div id="infoDiv" style="margin-top:20px;"></div>
<script>
    (() => {
        const infoDiv = document.getElementById("infoDiv");
        const greenDiv = document.getElementById("greenDiv");
        let html = `The inner &lt;span&gt; is ${greenDiv.firstElementChild.offsetHeight}px tall,`;
        html += ` but its container (the outer green &lt;div&gt;) is only ${greenDiv.offsetHeight}px tall.`;
        html += `<br/>How did the browser arrive at this ${greenDiv.offsetHeight}px value?`;
        infoDiv.innerHTML = html;
    })();
</script>
</body>
</html>

我使用 

line-height: 18px
进行顶部对齐，总高度仍然是 
18px
。如果我增加跨度的
line-height
，高度也会增加。如果更新对齐方式，高度也会增加。

总而言之，div 的 

line-height
和 
font-size
将设置最小高度。这个最小高度可以通过内部元素的 
line-height
及其垂直对齐来更改。
html css typography line-height
1个回答
0
投票

为了更好地理解，使 

line-height
等于 
0
，您将获得等于 
18px
的 div 高度。 div 的默认 
font-size
等于 
16px
，默认 
line-height
等于 
normal
。 
normal
值基于字体，在本例中，它似乎等于 
1.125
以获得 
18px = 1.125 * 16px

<!doctype html>
<html lang="en" style="font-family:'Arial';">
<head>
    <meta charset="utf-8"/>
    <title>Line-Height Test</title>
</head>
<body style="padding-top:50px;padding-right:calc(100% - 300px);">
<div id="greenDiv" style="background-color:lightgreen;">
    <span style="font-size:40px;line-height:0;">HELLO</span>
</div>
<div id="infoDiv" style="margin-top:20px;"></div>
<script>
    (() => {
        const infoDiv = document.getElementById("infoDiv");
        const greenDiv = document.getElementById("greenDiv");
        let html = `The inner &lt;span&gt; is ${greenDiv.firstElementChild.offsetHeight}px tall,`;
        html += ` but its container (the outer green &lt;div&gt;) is only ${greenDiv.offsetHeight}px tall.`;
        html += `<br/>How did the browser arrive at this ${greenDiv.offsetHeight}px value?`;
        infoDiv.innerHTML = html;
    })();
</script>
</body>
</html>

现在，如果您开始增加跨度的

line-height
，则 div 的高度将由于垂直对齐而增加。这有点棘手，因为我们需要一些复杂的计算来确定最终高度，但如果将跨度的对齐方式更改为与 
baseline
（默认对齐方式）不同的值，则高度将返回到 
18px
，无论 
 line-height

<!doctype html>
<html lang="en" style="font-family:'Arial';">
<head>
    <meta charset="utf-8"/>
    <title>Line-Height Test</title>
</head>
<body style="padding-top:50px;padding-right:calc(100% - 300px);">
<div id="greenDiv" style="background-color:lightgreen;">
    <span style="font-size:40px;line-height:18px;vertical-align: top">HELLO</span>
</div>
<div id="infoDiv" style="margin-top:20px;"></div>
<script>
    (() => {
        const infoDiv = document.getElementById("infoDiv");
        const greenDiv = document.getElementById("greenDiv");
        let html = `The inner &lt;span&gt; is ${greenDiv.firstElementChild.offsetHeight}px tall,`;
        html += ` but its container (the outer green &lt;div&gt;) is only ${greenDiv.offsetHeight}px tall.`;
        html += `<br/>How did the browser arrive at this ${greenDiv.offsetHeight}px value?`;
        infoDiv.innerHTML = html;
    })();
</script>
</body>
</html>

我使用 

line-height: 18px
进行顶部对齐，总高度仍然是 
18px
。如果我增加跨度的
line-height
，高度也会增加。如果更新对齐方式，高度也会增加。

总而言之，div 的 

line-height
和 
font-size
将设置最小高度。这个最小高度可以通过内部元素的 
line-height
及其垂直对齐来更改。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.