我正在努力理解以下 css 行為。也許我遺漏了一些重要的東西，因為這對我來說實際上似乎是一個簡單的場景。考慮以下示例：
.container {
background-color: lime;
font-size: 20px;
line-height: 20px;
}<div class="container">
<svg width="1em" height="1em" viewBox="0 0 24 24" >
<circle cx="12" cy="12" r="10"/>
</svg>
Text
</div>因為container已經line-height: 20px設定，我希望它是 20px 高。至少如果它只包含文本是這種情況。然而，對于 svg，它突然高 24 像素，即使 svg 高 20 像素，正如預期的那樣，因為height=1em. 此外，“文本”的高度為 23 像素，盡管我希望它是 20 像素。
有趣的是，如果我將container的 line-height 設定為 30px 之類的值，它會按預期運行：container現在30px很高。
你能幫我理解為什么container不是 20px 高嗎？或者line-height一旦容器包含其他元素而不僅僅是純文本，就不容易預測？謝謝！
uj5u.com熱心網友回復：
您的演示中有兩件事會影響div.container. 首先，line-height不是明確的、固定的height：它指定了div.container您的案例中行框的最小高度。因為line-height是最小值，如果里面的東西導致它增長，它就會增長。
通向SVG：它有一個默認vertical-align的baseline，它對齊到的基線div.container，并且由于它的高度，導致height的div.container增長，以適應它。通過將vertical-alignSVG更改為其他內容以適合您的 SVG 20px line-height，您可以使其適合。
我在vertical-align你的演示中添加了一些不同的道具，所以你可以看到對齊如何影響高度。在一般情況下，bottom并top對準SVG的底部和頂線，分別為，其中，由于SVG的20px高度，保持其內line-height。但是，如果你真的需要div.container為20px高，height或max-height可能是更好的選擇。
.container {
background-color: lime;
font-size: 20px;
line-height: 20px;
margin-bottom: 1em;
}<div class="container">
<svg width="1em" height="1em" viewBox="0 0 24 24" >
<circle cx="12" cy="12" r="10"/>
</svg>
Default: vertical-align: baseline (24px)
</div>
<div class="container">
<svg width="1em" height="1em" viewBox="0 0 24 24" style="vertical-align:middle">
<circle cx="12" cy="12" r="10"/>
</svg>
Default: vertical-align: middle (~22px)
</div>
<div class="container">
<svg width="1em" height="1em" viewBox="0 0 24 24" style="vertical-align:bottom">
<circle cx="12" cy="12" r="10"/>
</svg>
Default: vertical-align: bottom (20px)
</div>
<div class="container">
<svg width="1em" height="1em" viewBox="0 0 24 24" style="vertical-align:top">
<circle cx="12" cy="12" r="10"/>
</svg>
Default: vertical-align: top (20px)
</div>uj5u.com熱心網友回復：
這使用flex,align-items: center;和將所有高度設定為 20px line-height: 1rem;：
.container {
background-color: lime;
font-size: 20px;
line-height: 1rem;
display: flex;
align-items: center;
}<div class="container">
<svg width="1em" height="1em" viewBox="0 0 24 24" >
<circle cx="12" cy="12" r="10"/>
</svg>
Text
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/355517.html