Heim > Web-Frontend > HTML-Tutorial > So entfernen Sie den Standardabstand zwischen Inline-Block-Elementen

So entfernen Sie den Standardabstand zwischen Inline-Block-Elementen

WBOY
Freigeben: 2016-09-24 09:02:48
Original
1293 Leute haben es durchsucht

Ich habe vor ein paar Tagen eine Seite geschrieben

div{width:900px;}
div li{ display:inline-block; width:300px;}
<ul>
    <li></li>
Nach dem Login kopieren
  <li></li>
Nach dem Login kopieren
Nach dem Login kopieren
  <li></li>
Nach dem Login kopieren
Nach dem Login kopieren
</ul>
Nach dem Login kopieren

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;

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage