So gehen Sie mit Lücken unter CSS-Bildern um

Dieses Mal erkläre ich Ihnen, wie Sie mit Lücken unter CSS-Bildern umgehen. Was sind die Hinweise beim Umgang mit Lücken unter CSS-Bildern? Das Folgende ist ein praktischer Fall Schauen Sie mal rein.

Beim p+CSS-Schriftsatz auf der Seite kommt es absolut häufig vor, dass unter dem Bildelement img in IE6 (natürlich manchmal unter Firefox) überschüssiger Leerraum auftritt Die Methode ist auch absolut üblich. Je nach Grund sollten unterschiedliche Lösungen verwendet werden. Hier fassen wir die gängigen Methoden zur Behebung zusätzlicher Lücken im Bildlayout als Referenz zusammen.

1. Konvertieren Sie das Bild in ein Objekt auf Blockebene

Das heißt, stellen Sie img ein 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 des Bildes

Es kann auch gelöst werden, indem das Attribut vertical-align 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.

Fügen Sie also eine Zeile in #sub hinzu : font-size :0;

kann das Problem lösen. 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;

Wie 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

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 Auswahl.

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.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Verwenden Sie CSS vollständig, um Elemente zu zentrieren

Detaillierte Erklärung der Verwendung von Pseudoelementen:: vorher und ::nachher

Wie das Attribut „font-size-adjust“ das Webseitenlayout optimiert

Das obige ist der detaillierte Inhalt vonSo gehen Sie mit Lücken unter CSS-Bildern um. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!