Heim > Artikel > Web-Frontend > So entfernen Sie den Standardabstand zwischen Inline-Block-Elementen
Ich habe vor ein paar Tagen eine Seite geschrieben
div{width:900px;} div li{ display:inline-block; width:300px;} <ul> <li></li>
<li></li>
<li></li>
</ul>
Ich habe festgestellt, dass ein div mit einer Breite von 900 Pixel nicht in drei Inline-Elemente li mit einer Breite von 300 Pixel passt, daher musste ich float:left für das Layout verwenden. Als ich später online nachschaute, stellte ich fest, dass Inline-Block einen Standardabstand von 4 Pixeln hat und Inline auch einen Standardabstand hat. Schauen wir uns nun einige Methoden an, um den Abstand zwischen Inline-Block-Elementen und Inline-Elementen zu ermitteln:
1. Sie können das Element direkt in eine Zeile in HTML schreiben oder das schließende Tag und das zweite öffnende Tag in eine oder zwei Zeilen schreiben. Fügen Sie Kommentare hinzu oder entfernen Sie das schließende Tag direkt.
2. Stellen Sie margin-right auf einen negativen Wert ein, berücksichtigen Sie jedoch die Kontextschriftart und Textgröße.
3. Legen Sie zuerst die Schriftart des untergeordneten Elements und dann die Schriftgröße des übergeordneten Elements fest: 0px;////In Chrome: -webkit-text-size-adjust:none;
4 Stellen Sie den Buchstaben- oder Wortabstand des übergeordneten Elements auf einen negativen Wert ein, berücksichtigen Sie die Schriftart. Wenn das untergeordnete Element Text enthält, achten Sie auch auf die Einstellung des Buchstaben- oder Wortabstandswerts.
5.float:left;