將跨度對齊到其容器的頂部

Question

看來，當行高度大於1.1倍字體大小時，文本會在該行中垂直居中。它可以垂直對齊嗎？

在這個例子中

p { 
 
    background-color: pink; 
 
    font-size: 20px; 
 
    line-height: 40px 
 
} 
 

 
span { 
 
    background-color: lightblue; 
 
}

<p> 
 
    <span>Hello World</span> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World 
 
</p>

我希望文字對接起來反對粉紅色框的頂部。所有額外的粉紅色空間都將低於藍色，而不是在每條線的上方和下方分割。藍色的盒子會貼在粉紅色的頂部。我還沒有找到vertical-align: top或將line-height添加到跨度來幫助。

（編輯，以表明該文本可能會很長）

Answer 1

爲了保持行高，您可以將display: inline-block;添加到範圍 元素。

p { 
 
    background-color: pink; 
 
    font-size: 20px; 
 
    line-height: 40px 
 
} 
 

 
span { 
 
    background-color: lightblue; 
 
    display: inline-block; 
 
}

<p> 
 
    <span>Hello World</span> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World 
 
</p>

Answer 2

解決方案使用填充：

p { 
 
    background-color: pink; 
 
    font-size: 20px; 
 
    padding: 0 0 20px 0; 
 
    /* padding for top,right,bot,left */ 
 
} 
 

 
span { 
 
    background-color: lightblue; 
 
}

<p> 
 
    <span>Hello World</span> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World 
 
</p>

Answer 3

從丹尼爾的回答不同，但我想這符合你的要求太？

p { 
 
    background-color: pink; 
 
    font-size: 20px; 
 
    vertical-align: top; 
 
    height: 40px; 
 
} 
 

 
span { 
 
    background-color: lightblue; 
 
}

<p> 
 
    <span>Hello World</span> Hello World 
 
</p>

好吧，如果你的文字多，我只能想到這個解決方案：

$("#fontsize-input").on("input",() => { 
 
    $("p").css("font-size",$("#fontsize-input").val()+"px"); 
 
});

p { 
 
    background-color: pink; 
 
    font-size: 25px; 
 
    line-height: 2em; 
 
} 
 

 
span { 
 
    position: relative; 
 
    top: calc(-0.45em + 1px); 
 
} 
 

 
.highlight { 
 
    background-color: lightblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="range" min="10" max="40" id="fontsize-input"/> 
 
<p> 
 
    <span class="highlight">Hello World</span> <span>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World</span> 
 
</p>