Im üblichen Entwicklungsprozess müssen wir häufig mehrere Bilder verwenden.
<! Border-Bottom: 1PX Solid Red; Img src = lipeng.png> </li> </ul> </body> </html>
Aber zu diesem Zeitpunkt fanden wir ein Problem: Warum gibt es eine zusätzliche Linie unter meinem Bild?
Was ist los?
Hatte ich die äußere und innere Grenze zwischen IMG nicht klar?
Tatsächlich ist dies tatsächlich ein Geist, der Elemente inline.
Jedes sichtbare Element, das kein Block -Level -Element ist, ist ein internes zugeordnetes Element, und das Merkmal seiner Leistung ist die Form des Linienlayouts. ---- "CSS Autoritative Leitfaden"Was ist die Bedeutung?
Dies bedeutet, dass in der Tat, wie Bildtext und andere interne Assoziationselemente, mit seiner übergeordneten Grundlinie ausgerichtet ist, aber Sie sind auf die Baseline ausgerichtet.
Da wir den Grund für dieses Problem kennen, ist es viel einfacher, ihn zu lösen.
1. Die erste LösungDa es sich um das Inline -Element handelt, kann dieses Problem dieses Problem natürlich einfach und grob lösen, dh, um unser Element in personalisierte Persönlichkeit zu ändern, kann es von Inline zu Block geändert werden?
<Stiltyp = Text/CSS> IMG {Höhe: 200px; : 0 Rand: 0;} </style> 2. Die zweite LösungDies ist zu rau, das Geschlecht, wie wir glücklich zurück spielen können, also müssen wir die Kurve versuchen, um sie zu retten.
<Stiltyp = Text/CSS> IMG {Höhe: 200px; ;Es ist ersichtlich, dass dies auch die gewünschten Ergebnisse erzielen kann.
Der Grund dafür ist, dass das Standardattribut von vertikaler Ausrichtung die Grundlinie ist.
3. Die dritte LösungDie Methode der Ausrichtung ist jedoch geändert, sodass sie auch Probleme verursachen können. Jetzt, da Sie nicht mehr in der aktuellen Dokumentation sind, werden Sie natürlich nicht mit Verweis auf diesen Text ausgerichtet, wenn Sie sich auslegen.
Wir können schwebend verwenden.
<Stiltyp = Text/CSS> IMG {Höhe: 200px; Blau;Dies kann auch dieses Problem lösen, aber bitte beachten Sie, dass das Schwimmern, obwohl sie gut ist, nicht gierig sein können.
Sie müssen in der Lage sein, die Auswirkungen des Gleitvermögens korrekt zu lösen. Wenn Sie ursprünglich die Auswirkung der Textumgebung ausführen möchten, müssen Sie die beste Wahl verwenden.
4. Die vierte LösungWenn alle oben genannten Programme Ihre Probleme nicht lösen können, wird nur mein großer Kill geopfert.
Sie können Ihrem übergeordneten Element angeben, um die Textgröße auf 0 festzulegen.
<Stiltyp = Text/CSS> IMG {Höhe: 200px; ;Da Sie nach der Grundlinie des Textes ausgerichtet sind, werde ich den Text direkt festlegen, damit Sie ihn nicht positionieren können. Dieser Ansatz wird jedoch nur empfohlen, wenn Sie es eilig haben.
ZusammenfassenNun, die oben genannten Lösungen für dieses Problem. Ich hoffe, dass die Freunde, die diesen Artikel sehen, in Zukunft aus dieser Grube springen können. Wenn Sie Fragen haben, können Sie eine Nachricht zur Kommunikation überlassen.