Warum Formatierungszeichen wie CRLF durch bestimmten Browser als Leerzeichen gemacht?

Question

Ich brauche jemanden, mir zu erklären, wo diese zusätzliche Polsterung aus auf divs kommt das img-Elemente enthalten.

können Sie auf http://www.dev12.com/CSSTest für Live-Beispiele meine zwei Probleme.

Problem # 1 : Safari, Firefox und Opera machen etwa 6 Pixel von unerwünschten Bodenpolster auf dem Behälter div. Dabei spielt es keine Rolle, ob ich explizit padding 0px.

Problem # 2 : Wenn ich meinen Code formatieren, so dass jedes Bild auf seine eigene Linie in meiner HTML-Datei ist, werden zusätzlich 6 Pixel von rechts padding zu jedem Bild hinzugefügt. Zum Beispiel macht der folgende Codeblock unerwünschte Polsterung zwischen den beiden Bildern:

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

Allerdings das Code-Block nicht den unerwünschten Raum:

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

Offensichtlich Safari, Firefox und Opera sind Rendering meine Wagenrücklauf zwischen Span-Tags als Leerzeichen. Ich kann nicht immer erinnern, bevor Sie dieses Problem. Ich schreibe meinen Code in Textmate. Gibt es eine Einstellung, die ich an zu verhindern aussehen sollte?

Ich benutze immer die XHTML 1.0 Strict doctype. Dies ist besonders verwirrend für mich, weil es so rudimentär ist. Jemand mir helfen verstehen das!

KN

Answer 1

# 1 Das ist, weil die Standard-Baseline-Ausrichtung von Inline-Bildern - der zusätzliche Platz Sie für Unterlängen reserviert sind zu sehen (Buchstaben, die unter der Grundlinie gehen: g, p, q, y, etc.) in dem Text rund um Ihre Bilder. (Die Tatsache, dass Sie keinen Text haben, ist irrelevant -. Platz für sie nach wie vor reserviert ist)

Sie können es wie folgt loswerden:

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

# 2 Newlines sind Leerzeichen, und als Leerzeichen angezeigt bekommen. Wenn Sie HTML wie folgt hatte:

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

Sie würden erwarten, dass der Browser ein Leerzeichen zwischen „Satz“ setzen und „in“, würden Sie nicht? <img> Elemente sind Inline-Blöcke, wie Wörter in einem Absatz.

Answer 2

Wenn ich mich richtig erinnere, sagen die HTML-Spezifikationen, dass jeder und alle Leerzeichen in der Quelldatei wird als ein einzelnes Leerzeichen gemacht werden.

Zum Beispiel, wenn Sie einen neuen HTML-doc und Typen öffnen

hello
world

Das Ergebnis wird sein "Hallo Welt"

Das gleiche Ergebnis für eine der folgenden angezeigt:

hello


world

------ oder ----------

hello world

------ oder ----------

hello                                                 world

Egal wie viel Leerzeichen Sie zwischen put „Hallo“ und „Welt“ nur wird man machen. Dabei spielt es keine Rolle, ob die Leerzeichen ein CRLF oder ein Leerzeichen ist.