コンテナの先頭にスパンを合わせる

Question

line-heightがfont-sizeの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>