3

この余分なパディングがimg要素を含むdivのどこから来ているのかを説明してくれる人が必要です。

私の2つの問題の実例については、http：//www.dev12.com/CSSTestにアクセスしてください。

問題＃1：Safari、Firefox、Operaは、コンテナdivに約6ピクセルの不要な下部パディングをレンダリングします。パディングを明示的に0pxに設定してもかまいません。

問題＃2：各画像がhtmlファイルの独自の行にあるようにコードをフォーマットすると、各画像に6ピクセルの右パディングが追加されます。たとえば、次のコードブロックは、2つの画像間に不要なパディングをレンダリングします。

<div>
    <span><img src="button.gif" /></span>
    <span><img src="button.gif" /></span>
</div>

ただし、このコードブロックには不要なスペースがありません。

<div>
    <span><img src="button.gif" /></span><span><img src="button.gif" /></span>
</div>

明らかに、Safari、Firefox、Operaは、スパンタグ間のキャリッジリターンを空白としてレンダリングしています。私はこれまでこの問題を抱えていたことを思い出せません。私はTextmateでコードを書いています。これを防ぐために見なければならない設定はありますか？

私は常にXHTML1.0StrictDoctypeを使用します。それはとても初歩的であるため、これは私にとって特に混乱します。誰かが私がこれを理解するのを手伝ってくれます！

KN

4

2 に答える 2

9

＃1これは、インライン画像のデフォルトのベースライン配置によるものです。表示される余分なスペースは、画像を囲むテキストのディセンダー（ベースラインより下にある文字：g、p、q、yなど）用に予約されています。（テキストがないという事実は関係ありません-それらのためのスペースはまだ予約されています。）

あなたはこのようにそれを取り除くことができます：

img {  /* Or a suitable class, etc. */
    vertical-align: bottom;
}

＃2改行は空白であり、スペースとして表示されます。このようなHTMLがある場合：

<p>This is a sentence
in a paragraph.<p>

ブラウザが「文」と「中」の間にスペースを入れることを期待しますね。 <img>要素は、段落内の単語と同じように、インラインブロックです。

于 2009-05-10T22:57:03.237 に答える
3

私の記憶が正しければ、HTML仕様では、ソースファイル内のすべての空白が単一の空白としてレンダリングされるとされています。

たとえば、新しいHTMLドキュメントを開いて、次のように入力した場合

hello
world

結果は「helloworld」になります

次のいずれについても同じ結果が表示されます。

hello


world

- - - また - - - - - 

hello world

- - - また - - - - - 

hello                                                 world

「hello」と「world」の間にいくら空白を入れても、レンダリングされるのは1つだけです。空白がCRLFであるかスペース文字であるかは関係ありません。

于 2009-05-10T22:57:55.137 に答える