絶対インライン要素の位置が異なる

Question

親インライン要素にインライン要素を絶対配置することを試みます。しかし、いくつかの未知の理由から、親要素は現れるよりも大きい。以下を試してみると、右の絶対配置された要素が親要素の外側にあることがわかります。 width：100％を使用すると、子要素を親よりも大きくすることもできます。 Firefoxの52

<span style="position:relative;">same position 
 
\t <span style="position:absolute; top:100%; left:0;">same position</span> 
 
\t <span style="position:absolute; top:200%; right:0;">same position</span> 
 
\t </span>

Answer 1

でテストあなたの問題は、外側スパンに内部spanの絶対相対を作っているということです。外側のスパンは2つの単語しか持たないので、それはそれだけです。

<span style="position:relative;width: 100%;display: block;">same position 
    <span style="position:absolute; top:100%; left:0;">same position</span> 
    <span style="position:absolute; top:100%; right:0;">same position</span> 
</span> 

これは、必要なコードです。外側スパンの幅が100％になり、2つの内側スパンがより広いスパンに対して相対的になるようになりました。さらに、それをさらに下げたくない限り、top:100%に正しいスパンを持つことができました。しかし、一度スパンをdisplay:blockにすると、divにしてもらえません。width: 100%;display: block;

display: inline-blockは、親divと同じ幅にしたい場合にも使用できます。

EDIT補遺：彼らはposition: absoluteをしているので、彼らは彼らの位置決めが絶対的であることを意味し、外側のスパンであり、両親のいずれが原因でそれらを再構築しませんように、内側スパンが見えなくなります。親はposition: relativeなので、絶対位置は親との相対的なものですが、親divを大きくすることは実際には親の内側にはありません。親を持つ可能性のある別の解決策は、要素内のテキストを含めることです：

<div> 
    same position 
    <div style="">same position</div> 
    <div style="float: right;">same position</div> 
</div> 

Answer 2

いくつかの研究の後、私は問題を抱えていると思います。これは、インライン要素の最後にある空白のためです。このコードですべての空白を削除すると、結果は期待されるものになります。それとも、他のいくつかのハックを使用することができます。

<span style="position:relative;">same position<!-- 
 
\t --><span style="position:absolute; top:100%; left:0;">same position</span><!-- 
 
\t --><span style="position:absolute; top:200%; right:0;">same position</span><!-- 
 
--></span>

が先頭と末尾の空白をトリムする他のソリューションではないですか？なぜブラウザはそれらの空白をレンダリングするのですか？空白よりも別のコードの美化方法はありますか？