Pourquoi les caractères de formatage comme CRLF étant rendus par certains navigateurs comme des espaces?

Question

J'ai besoin de quelqu'un pour me expliquer où ce rembourrage supplémentaire vient sur divs qui contiennent des éléments img.

Vous pouvez aller à http://www.dev12.com/CSSTest pour des exemples en direct de mes deux problèmes.

Problème # 1 : Safari, Firefox et Opera rendent environ 6 pixels de remplissage de fond indésirable sur la div conteneur. Peu importe si je mets explicitement le rembourrage à 0px.

Problème # 2 : Si je formate mon code afin que chaque image est sur son propre ligne dans mon fichier html, un supplément de 6 pixels de rembourrage droit sont ajoutés à chaque image. Par exemple, le bloc de code suivant rend le rembourrage indésirable entre les deux images:

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

Cependant, ce bloc de code n'a pas l'espace non désiré:

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

Il est évident que Safari, Firefox et Opera sont rendu mon retour chariot entre les balises span comme des espaces. Je ne me souviens jamais avoir ce problème avant. Je vous écris mon code dans TextMate. Est-il un paramètre que je devrais regarder pour empêcher cela?

J'utilise toujours le XHTML 1.0 Strict doctype. Cela est particulièrement déroutant pour moi parce qu'il est si rudimentaire. Quelqu'un me aider à comprendre cela!

KN

Answer 1

# 1 est à cause de l'alignement de base par défaut d'images en ligne - l'espace supplémentaire que vous voyez est réservé pour descendeur (lettres qui vont au-dessous de la ligne de base: g, p, q, y, etc.) dans le texte entourant vos images. (Le fait que vous avez pas de texte est hors de propos -. Espace pour eux est encore réservé)

Vous pouvez vous en débarrasser comme ceci:

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

# 2 sont des espaces Les sauts de ligne, et s'affichent des espaces. Si vous aviez HTML comme ceci:

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

vous vous attendez le navigateur de mettre un espace entre les « peine » et « dans », pas vous? Éléments sont des blocs <img> inline, comme les mots dans un paragraphe.

Answer 2

Si je me souviens bien, les spécifications HTML disent que tout et tous les espaces dans le fichier source sera rendu en un seul espace.

Par exemple, si vous ouvrez un nouveau document HTML et le type

hello
world

Le résultat sera "Bonjour tout le monde"

Le même résultat apparaît pour une des opérations suivantes:

hello


world

------ ---------- ou

hello world

------ ---------- ou

hello                                                 world

Peu importe combien vous mettez des espaces entre les « bonjour » et « monde » un seul sera rendu. Peu importe si les espaces blancs est un CRLF ou un espace.