CRLF などの書式設定文字が特定のブラウザで空白として表示されるのはなぜですか?

StackOverflow https://stackoverflow.com/questions/846271

質問

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

に行くことができます http://www.dev12.com/CSSTest 私の 2 つの問題の実例をご覧ください。

問題 #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 は、span タグ間のキャリッジ リターンを空白としてレンダリングしています。以前にこの問題が発生したことを思い出せません。Textmate でコードを書いています。これを防ぐために検討すべき設定はありますか?

私は常に XHTML 1.0 Strict doctype を使用します。これは非常に初歩的なものであるため、私にとっては特に混乱します。誰かこれを理解するのを手伝ってください！

KN

役に立ちましたか？

解決

#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>

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

他のヒント

私の記憶が正しければ、HTML 仕様では、ソース ファイル内のあらゆる空白は 1 つの空白としてレンダリングされると規定されています。

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

hello
world

結果は「hello world」になります

次のいずれの場合でも同じ結果が表示されます。

hello


world

- - - または - - - - - 

hello world

- - - または - - - - - 

hello                                                 world

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top