Leerzeichen zwischen <img> tags

wenn ich diesen code verwenden (mit Leerzeichen zwischen den beiden tags):

<img src="....." style="border:0px;margin:0px" />
<img src="....." style="border:0px;margin:0px" />

gibt es 4 Pixel zwischen den Bildern. wenn ich dieses verwenden:

<img src="....." style="border:0px;margin:0px" /><img src="...." style="border:0px;margin:0px" />

den Raum zwischen den Bildern verschwinden, die auf allen Browsern!

Warum????????

Jede Menge leerer Raum (aka " white space) gerendert, die einem Raum Charakter, wahrscheinlich seine Standard-Breite von 4 Pixel. Neue-Zeile-Zeichen ist als leerer Raum.

InformationsquelleAutor Omega | 2011-03-07

html

<img src="http://www.nataliedee.com/111908/whatever-dude-whatever.jpg" style="border:0px;margin:0px;float:left;width:200px;" />
<img src="http://www.nataliedee.com/111908/whatever-dude-whatever.jpg" style="border:0px;margin:0px;clear:both;width:200px;" />

http://jsfiddle.net/JNWc7/

Die Frage ist, WARUM dies geschieht (mit einer unerträglichen Menge an Fragezeichen). Diese gibt keine Antwort auf diese Frage.

InformationsquelleAutor Michael

Das ist, weil der weiße Raum ist bedeutsam für inline-Elemente. Sie können immer schwimmen Ihre Bilder, wenn Sie wollen müssen Sie line-up.

Bearbeiten: Wie gewünscht, hier ein einfaches Beispiel:

CSS:

/* This is used to "clear" the floated elements */
.images { overflow: hidden; width: 100% }

/* float the elements so that white space does not matter */
.images img { float: left; }

HTML:

<div class="images">
    <img src="http://dummyimage.com/150x100/000/fff&text=first+image" alt="first image" />
    <img src="http://dummyimage.com/150x100/6aa8de/fff&text=second+image" alt="second image" />
    <img src="http://dummyimage.com/150x100/ff6500/fff&text=third+image" alt="third image" />
</div>

float würde dieses Problem vermeiden, aber die Schwimmer haben viele andere Macken Ihrer eigenen. Und nicht das problem lösen, wenn er nicht will, dass die Bilder zu inline.
Viele Macken? Floating elements ist ziemlich standard in allen Browsern.

InformationsquelleAutor wsanville

6

Aus dem gleichen Grund, es ist ein Leerzeichen zwischen den Buchstaben a und b dieses Absatzes:
```
<p>a
b</p>
```
Jede Art von Raum in HTML behandelt wird, als ein Raum (und brach in ein einzelnes Leerzeichen).

InformationsquelleAutor Quentin
4

Der Grund für dieses ist, weil HTML behandelt ein neue-Zeile-Zeichen wie Leerzeichen und Leerzeichen gedruckt.

InformationsquelleAutor Spudley
2

Dies geschieht, weil Ihre newline gerendert wird als ein Raum.

Um dies zu vermeiden, stellen Sie sicher, es gibt keine Leerzeichen zwischen den tags.
Hier ' s was ich normalerweise tun:
```
<img src="....." style="border:0px;margin:0px"
 /><img src="....." style="border:0px;margin:0px" />
```
Sicher, es ist hässlich. Aber es ist der beste Weg, damit umzugehen.

Anmerkung zu den anderen Antworten: die Schwimmer haben alle Arten von verschiedenen Effekten, die Sie wahrscheinlich nicht wollen (die meisten wichtiger ist, treiben Sie neben Ihren anderen Inhalten). Wenn Sie nur wollen, inline-Bilder, dies ist Ihre Lösung.

InformationsquelleAutor Joeri Hendrickx
1

Wenn Sie don ' T haben jeden text in diesem div mit Bildern, font-size:0; behebt auch dieses Problem

InformationsquelleAutor Davor
1

Gibt es so viele gute Antworten auf diese Frage, aber ich denke, es ist die chance, dies könnte nützlich sein für alle, die gekommen sind, um dies in Zukunft.

<img> Elemente fließen wie inline-text, aber auch eine Breite und Höhe wie der block-Elemente. In CSS können Sie festlegen, dass ein element display: inline-block zu machen, repliziert das Verhalten der Bilder, so wäre es schön zu denken <img>s als inline-blocks (Browser technisch verwenden display: inline aber Sie geben eine Besondere Behandlung, um Bilder wie inline-block Elemente).

Also, wenn Sie hinzufügen von weißen Flächen, die wie
- Raum
- Registerkarte
- newine
zwischen Ihnen ist eine Lücke angezeigt.

Je nach der situation, die Sie können verwenden Sie eine der folgenden Methoden, um loszuwerden, der die Lücke:
- Fügen Sie einen negativen margin-left
- Verwenden float
- Entfernen Sie die Leerzeichen zwischen den Elementen, die getan werden kann:
  
  1 - Setzen Sie ein Thema in einer Linie
```
<img src="..."><img src="...">
```
  2 - Entfernen Sie das Leerzeichen
```
<img src="..."><
img src="...">
```
  3 - Verwenden Sie HTML-Kommentare
```
<img src="..."><img src="...">
```
  4 - Überspringen der schließende tag (im Falle es ist wie li). (HTML5-only)
```
<ul>
   <li>First
   <li>Second
</ul>
```
  5- font-size: 0 auf das parent-element
InformationsquelleAutor Pmpr

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.