5 Möglichkeiten, Inline-Block-Leerzeichen in HTML schnell zu entfernen

Wenn Sie den Rand und den Abstand von „Inline“-Elementen steuern müssen, ist der Wert des Inline-Block-Attributs sehr nützlich. Damit müssen Sie diese Elemente nicht mehr „blockieren“ und „floaten“. Es gibt jedoch ein Problem: Bei der Verwendung von Inline-Block wird der Leerraum zwischen HTML-Elementen auf der Seite angezeigt. Sehr nervig. Es gibt mehrere Möglichkeiten, diese Leerzeichen zu entfernen; eine davon ist ziemlich clever.

Methode 1: Lassen Sie keinen Leerraum zwischen Elementen

Eine 100%ige Lösung für dieses Problem besteht darin, in Ihrem HTML-Code keinen Leerraum zwischen Elementen zu lassen:

<ul>   
  
<li>Item content</li>   
  
<li>Item content</li>   
  
<li>Item content</li>   
  
</ul>

Das sieht natürlich chaotisch aus und erschwert die Wartung des Codes, aber es ist sehr praktisch, sehr intuitiv und, was noch wichtiger ist... sehr zuverlässig.

Methode 2: Schriftgröße: 0 für das übergeordnete Element festlegen

Die beste Lösung für dieses Leerraumproblem besteht darin, Schriftgröße: 0 für das übergeordnete Element dieses Inline-Blocks festzulegen Elemente. Wenn Ihr

über einen Inline-Block
• verfügt, können Sie Folgendes tun:

  .inline-block-list { /* ul or ol with this class */   
   font-size: 0;   
  }   
    
  .inline-block-list li {   
   font-size: 14px; /* put the font-size back */   
  }

  Um zu verhindern, dass die Schriftgröße des übergeordneten Elements beeinträchtigt wird Bei den untergeordneten Elementen müssen Sie den Schriftgrößenwert für das untergeordnete Element neu festlegen, was normalerweise einfach ist. Es kann nur dann zu Problemen kommen, wenn Sie die Schriftart auf eine relative Größe festlegen. Aber in den meisten Fällen wird diese Methode Ihr Problem lösen.

  Methode 3: HTML-Kommentare

  Diese Methode ist etwas gewalttätig, kann aber trotzdem funktionieren. Das Füllen der Leerzeichen zwischen HTML-Elementen mit Kommentaren hat den gleichen Effekt, als ob kein Leerzeichen dazwischen wäre:

  <ul>  
   <li>Item content</li><!--  
   --><li>Item content</li><!--  
   --><li>Item content</li>  
  </ul>

  Mit einem Wort...ekelhaft. In zwei Worten ... sehr ekelhaft. In drei Worten ... OK, Sie haben es verstanden. Aber es funktioniert!

  Methode 4: Negative Ränder

  Es ist Methode 2 sehr ähnlich, sorry. Sie können die Flexibilität von Inline-Blöcken nutzen und ihnen einen negativen Rand geben, um den Leerraum zu verbergen:

  .inline-block-list li {   
   margin-left: -4px;   
  }

  Diese Methode wird am wenigsten empfohlen, da Sie dort verschiedene Manchmal berücksichtigen müssen wird es einige unvorhergesehene Lücken geben. Diesen Trick sollte man am besten nicht anwenden.

  Methode 5: Head-to-Tail

  Eine andere Möglichkeit, HTML-Tags zu verwenden, besteht darin, das schließende Tag eines Elements und das öffnende Tag des nächsten Elements nahe beieinander zu platzieren:

  <ul>  
   <li>Item content</li  
   ><li>Item content</li  
   ><li>Item content</li>  
  </ul>

  ist nicht so hässlich wie HTML-Kommentare, aber ich würde diese Leerzeichen lieber von Hand entfernen, unabhängig von der Lesbarkeit des Codes.

  Keine Methode ist ideal, aber keinen Leerraum auf der Seite zu lassen ist auch eine schlechte Methode. Dies ist keine Warnung vor der Verwendung von Inline-Blöcken. Inline-Blöcke sind immer noch sehr nützlich, aber Sie müssen nur verstehen, wie Sie mit den darin vorkommenden Leerzeichen umgehen.

  Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website unterstützt.

  Weitere 5 Möglichkeiten zum schnellen Entfernen des Leerraums von Inline-Block in HTML finden Sie auf der chinesischen PHP-Website für verwandte Artikel!