インラインスパン要素のパディングを削除します

2つのインライン要素があります。一方の位置が絶対に設定され、他方が絶対位置に設定されていることを除いて、それらはまったく同じであると仮定することができます。このように：インラインスパン要素のパディングを削除します

<body style="text-align: center;"> 
<span style="background-color: #000; color: white; font-size: 300px; line-height: 1; padding: 0; position: relative;"> 
    AAA <span style="background-color: #333; color: white; font-size: 300px; line-height: 1; padding: 0; position: absolute; top: 100%; left: 0;">AAA</span> 
</span> 
</body>

フィドル：http://jsfiddle.net/CSPFL/5/

そして、もちろん、フルスクリーンフィドル：http://jsfiddle.net/CSPFL/5/show/

スパンが同じ高さではありません！静的スパンにはある種のパディングがあります。絶対に位置を変更することなく、このパディングを削除することは可能ですか？前もって感謝します！

EDIT：左に100％、上に10％を変更すると、同じ高さでないことがわかります。彼らはMacのFFで同じ高さのようです。

出典

2012-02-02 bopjesvla

フィディッドURLは機能しません（404）。彼らは "_bop /"部分が省略されている場合は動作しますが、最新のバージョンを参照していますか？ –

Royiの例を変更しました。ハイパーリンクを完全に置き換えるのを忘れました...はい、これは最新のバージョンです。 – bopjesvla

これは2つの要素を揃える非常に奇妙な方法のようです。興味深いもの： – MetalFrog

はこれを試してみてください。

<span style="background-color: #000; color: white; font-size: 300px; padding: 0;float:left;">AAA</span> 
<span style="background-color: #000; color: white; font-size: 300px; padding: 0; position: absolute;float:left;">AAA</span>

http://jsfiddle.net/CSPFL/1/

出典

2012-02-02 20:29:40

申し訳ありませんが、動作しません。私は例を精緻化した... – bopjesvla

問題はposition: absoluteに応じて単離することができます。 line-height: 1のspanのルールに追加するだけでその外観が変わります。これは、さまざまな種類の要素（CSSの面倒な部分の一部）の異なる高さ計算アルゴリズムに依存します。

あなたの問題は非配置spanが高すぎるということですので、それはレンダリングにブロック要素（またはインラインブロック）にそれを回すために役立つかもしれない：追加

display: block

または

display: inline-block

spanの場合は

です。

出典

2012-02-03 14:42:52

本当に？あなたは私のコメントを読まずに（あるいは答えをコピーしただけで）答える必要があります。いずれにしても、私は15分前にそれを理解しました。 – bopjesvla

インラインスパン要素のパディングを削除します

答えて

関連する問題