Wie Schaffe ich es, den Raum zwischen <img> - Elemente in einer Zeile in einer html-Seite?

Ich bin Anzeige 3 <img> in einer Zeile wie dieser:

<div style="width: 950px">

                <img src='/UploadedImages/86.jpg' alt='' style="width: 300px; margin: 0px; padding: 0px; border: 1px solid Black" />

                <img src='/UploadedImages/85.jpg' alt='' style="width: 300px; margin: 0px; padding: 0px; border: 1px solid Black" />

                <img src='/UploadedImages/84.gif' alt='' style="width: 300px; margin: 0px; padding: 0px; border: 1px solid Black" />

        </div>

Wie Sie sehen können, habe ich dünnen schwarzen Rahmen um die Bilder. Mein problem ist, dass es weißen Räumen, die sich über die 5px Breite zwischen den Grenzen von benachbarten Bildern und ich haben den Rand zu werden 0px aber es funktioniert nicht. Also, was ist hier passiert?

InformationsquelleAutor Aperture | 2011-01-06
  1. 16

    Müssen Sie die whitespaces (Zeilenumbrüche & Leerzeichen) zwischen den tags:

    <img src='/UploadedImages/86.jpg' alt='' style="..." /><img src='/UploadedImages/85.jpg' alt='' style="..." />

    oder Kommentare zu halten Zeilenumbrüche:

    <img src='/UploadedImages/86.jpg' alt='' style="..." /><!--

--><img src='/UploadedImages/85.jpg' alt='' style="..." />
    • +1 Den Raum verursacht wird, da der browser fängt die tab/return-zwischen Ihnen ein Raum.
    • Dieser bricht sehr leicht, je nach IDE Sie verwenden, würde ich empfehlen, eine Solidere Lösung.
    InformationsquelleAutor Floern
  2. 7

    Einer img ist ein inline-element (sort of...), also Leerzeichen und neue Zeilen werden angezeigt, die in Ihrem div. Um zu vermeiden, dass Sie schwimmen können die Bilder aber dann müssten Sie einen überlauf der Behälter als auch:

    div {
  overflow: hidden;
}
div img {
  float: left;
}

    Den überlauf am Behälter ist erforderlich, damit der container kapselt die Bilder. Ansonsten wird er zusammenbrechen.

    InformationsquelleAutor jeroen
  3. 2

    Können Sie loszuwerden, die Lücken durch die Einstellung der font-size des Containers auf null ;

    CSS

    .imgContainer { 
    font-size: 0px ; 
    white-space: nowrap; 
}

    HTML

    <div class="imgContainer">
    <img src="img1.png" />
    <img src="img2.png" />
    <img src="img3.png" />
</div>
    InformationsquelleAutor Bob
  4. 1

    Wrap Bilder in einer ul-und float der li:

    <div style="width: 950px">
 <ul>
  <li><img src='/UploadedImages/86.jpg' alt='' /></li>
  <li><img src='/UploadedImages/85.jpg' alt='' /></li>
  <li><img src='/UploadedImages/84.jpg' alt='' /></li>
 </ul>
</div>

    und dann fügen wir display:block; img css:

     ul li {
 float:left;
 display:inline;
 list-style:none;
 }
 ul li img {
 border: 1px solid #000;
 display:block;
 padding: 0;
 width: 300px;
 }

    jFiddle demo

    InformationsquelleAutor Gemma
Schreibe einen Kommentar