ブラウザはどのように 'スパン'をレンダリングするのですか？

Question

<p> 
    <span>cancel</span><span>comfirm</span> 
    </p> 
    <hr> 
    <p> 
    <span>cancel</span> 
    <span>confirm</span> 
    </p> 

私は同じ結果を表示する必要があります。 2番目のテンプレートでは、レンダリング後、 'キャンセル'と '確認'の間に 'スペース'があります。

タグはインライン要素なので、改行は使用されません。

私はそれらを両方ともCSSでフローティングすることができます。

しかし、理由はわかりません。私はブロックタグにはスペースがあると思う。

ref img

Answer 1

注：OP、それは答えた後、彼の質問を編集した、まだ、答えは 適用可能であり、彼はちょうどので、今の彼のイメージが 正しいDOMの順序を変更しました。

あなたの画像は正しくないと思います。 first p elementに空白が表示され、2番目の空白が表示されていないはずです。 spanはinlineの要素なので、ソースのインライン要素間に改行があると、ブラウザによって空白がレンダリングされます。

あなたはすでに2 ^回目例ではやっているソースコード内の1行にそれらの要素を置くことによって、いくつかの方法でこれをハックすることができ、あるいは、あなたの親要素にfont-size: 0;を使用してfont-size再設定することができます子要素の場合はthisのように空のコメントを付けることができます。

Answer 2

スパンは、同様のスタイルを適用するテキストグループです。スパンにはデフォルトでスタイルが適用されていません。 Spanは一般にデータの特定の部分にスタイリングするために使用されます。スパンはブラウザ上で何かまたは何かとしてレンダリングされません。