Sechs Lösungen für das Problem des Leerraums am unteren Rand des Bildes

Dieser Artikel bietet Ihnen sechs wichtige Lösungen für das Problem des Leerraums am Ende des Bildes. Ich hoffe, dass er für Freunde in Not hilfreich ist.

Manchmal legen wir den margin-bottom-Wert nicht im Randattribut für das Bild (img-Tag) fest, und in einigen Browsern wird ein leerer unterer Rand angezeigt. Im Folgenden stellen wir verschiedene Methoden zur Lösung dieses Problems vor.

1. Legen Sie das Bild als Element auf Blockebene fest

Zum Beispiel: img{display:block;}

2. Legen Sie die vertikale Ausrichtung des Bildes fest

Zum Beispiel: img{vertical-align:top;} (Der Wert von vartical-align ist optional, Text-Top, Bottom, Text-Bottom usw., je nachdem je nach Situation.)

3. Stellen Sie die Textgröße des übergeordneten Objekts auf 0px ein

Beispiel: Das übergeordnete Objekt von img ist imgClass, dann fügen Sie einfach ein Attribut „font-size:0px“ hinzu zu imgClass. Dadurch wird jedoch verhindert, dass der Text im übergeordneten Objekt ordnungsgemäß angezeigt wird. Auch wenn der Textteil von einem Unterobjekt umschlossen ist, kann er durch Festlegen der Textgröße des Unterobjekts immer noch angezeigt werden. Bei der CSS-Validierung wird jedoch eine Fehlermeldung angezeigt, dass der Text zu klein ist.

4. Ändern Sie die Eigenschaften des übergeordneten Objekts

Wenn die Höhe und Breite des übergeordneten Objekts festgelegt sind und die Bildgröße vom übergeordneten Objekt abhängt, können Sie dies tun Legen Sie das übergeordnete Objekt fest: overflow:hidden ;

5. Legen Sie das Floating-Attribut des Bildes fest

wie zum Beispiel: img{float:left;}

6. Entfernen Sie das Bild-Tag und das Leerzeichen zwischen dem letzten schließenden Tag des übergeordneten Objekts

. Wir fügen oft einen leeren Einzug ein, um den Seitencode zu erstellen Hierarchie klar.

Im Allgemeinen ist Methode 1) besser, wenn Sie keine Bilder mischen müssen, und Methode 2) ist auch gut; wenn Sie Bilder und Text mischen möchten, ist Methode 5) besser, aber Denken Sie daran, Schwimmer zu löschen. Welche Methode zum Einsatz kommt, hängt natürlich von der konkreten Situation und den individuellen Vorlieben ab.

Das Obige ist eine vollständige Einführung in die sechs wichtigsten Lösungen für das Problem des Leerraums unten im Bild. Wenn Sie mehr über HTML-Tutorial erfahren möchten Bitte achten Sie auf die chinesische PHP-Website.

Das obige ist der detaillierte Inhalt vonSechs Lösungen für das Problem des Leerraums am unteren Rand des Bildes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!