So lösen Sie das Problem der Lücken unter CSS-Bildern

In diesem Artikel werden hauptsächlich 6 Lösungen für das Problem der Lücken unter CSS-Bildern vorgestellt.

Beim Setzen von p+CSS auf der Seite bin ich auf IE6 gestoßen (natürlich manchmal unter Firefox). ) Ich werde auch gelegentlich darauf stoßen. Das Problem des zusätzlichen Leerraums unter dem Bildelement img ist definitiv häufig. Die Lösung für dieses Problem ist „nach Gehör abspielen“. Hier finden Sie eine Zusammenfassung gängiger Methoden zum Beheben von Fehlern mit zusätzlichen Lücken unter dem Bildlayout als Referenz.

1. Konvertieren Sie das Bild in ein Objekt auf Blockebene

Das heißt, img einstellen auf:

Anzeige: block;

Fügen Sie in diesem Beispiel einen Satz CSS-Codes hinzu:

#sub img {display:block;}

Ungültig für IE6/7

2 Legen Sie die vertikale Ausrichtung fest Bild

Es kann auch gelöst werden, indem das Vertical-Align-Attribut des Bildes auf „oben, Text oben, unten, Text unten“ gesetzt wird. Fügen Sie in diesem Beispiel beispielsweise eine Reihe von CSS-Codes hinzu:

#sub img {vertical-align:top;}

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

Das heißt, fügen Sie eine Zeile in #sub hinzu:

 font-size:0;

OK Lösen Sie das Problem. Dies führte jedoch auch zu einem neuen Problem: Der Text im übergeordneten Objekt konnte nicht angezeigt werden. Selbst 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 Breite und Höhe des übergeordneten Objekts festgelegt sind und die Bildgröße davon abhängt für das übergeordnete Objekt können Sie Folgendes festlegen: overflow:hidden;, um dieses Problem zu lösen.

In diesem Beispiel können Sie den folgenden Code zu #sub hinzufügen:

width:88px;height:31px;overflow:hidden;

5. Legen Sie das Floating-Attribut des Bildes fest

Fügen Sie in diesem Fall eine Zeile CSS-Code hinzu:

#sub img {float:left;}

Wenn Sie eine gemischte Anordnung von Bildern und Text erreichen möchten, ist diese Methode eine gute Wahl.

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

Es sollte betont werden, dass diese Methode in der tatsächlichen Entwicklung zu Problemen führen kann, da es beim Schreiben von Code unvermeidlich ist, den Code bereitzustellen, um ihn semantischer und klarer zu machen die IDE-Einrückungsanzeige, die unweigerlich dazu führt, dass Beschriftungen und andere Beschriftungen in neuen Zeilen angezeigt werden, wie z. B. der DW-Befehl „Quellformat anwenden“. Daher kann diese Methode uns helfen, eine Situation zu verstehen, in der ein Fehler auftritt. Die spezifische Lösung muss von jedem gelöst werden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über die Nutzungsanalyse des Animationsattributs in CSS3

Zwei Möglichkeiten, externe CSS-Dateien zu referenzieren

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem der Lücken unter CSS-Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!