パディング要素：最初の行の上に第二のラインパディングフローない理由相対

Question

p { 
 
    border: 1px solid red; 
 
    width: 200px; 
 
    padding: 10px; 
 
} 
 

 
span { 
 
    position: relative; 
 
    background-color: #ccc; 
 
    color: crimson; 
 
    padding: 6px; 
 
}

<p> 
 
    <span>We're studying second line padding</span> 
 
</p>

は、両方とも同じspan要素がありますか？

Answer 1

これは、<span>がインライン要素であり、上下のパディングに気を付けないからです。インライン要素はコンテンツと一緒に流れる傾向があり、また、上部と下部のボックスモデルを尊重しません。だから、inline-blockとして<span>要素を作る：

span { 
    position: relative; 
    background-color: #ccc; 
    color: crimson; 
    padding: 6px; 
    display: inline-block; 
} 

スニペット

p { 
 
    border: 1px solid red; 
 
    width: 200px; 
 
    padding: 10px; 
 
} 
 

 
span { 
 
    position: relative; 
 
    background-color: #ccc; 
 
    color: crimson; 
 
    padding: 6px; 
 
    display: inline-block; 
 
}

<p><span> We're studying second line padding</span></p>

プレビュー