So entfernen Sie Inline-Block-Leerzeichen in HTML

In diesem Artikel werden hauptsächlich fünf Möglichkeiten zum schnellen Entfernen von Inline-Blocks in HTML vorgestellt.

Wenn Sie den Rand des „Inline“-Elements und die Auffüllung des Inline-Blocks steuern müssen Der Attributwert wird dadurch sehr nützlich, Sie müssen 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 liegt in Ihrem HTML-Code. Lassen Sie kein Leerzeichen Leerzeichen zwischen Elementen:

<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 praktisch, intuitiv und vor allem ... zuverlässig.

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

Die beste Lösung für dieses Leerraumproblem ist Bei diesen Inline-Block-Elementen ist für ihr übergeordnetes Element die Schriftgröße „font-size: 0“ festgelegt. Wenn Ihr

einen Inline-Block
• hat, 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 sich die Schriftgröße des übergeordneten Elements auf das untergeordnete Element auswirkt, müssen Sie Folgendes tun: - Passen Sie die Schriftgröße des untergeordneten Elements an. Dies ist normalerweise einfach. 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

  Sehr ähnlich zu Methode 2 , sorry. Sie können die Flexibilität von Inline-Block nutzen und einen negativen Rand festlegen, um den Leerraum auszublenden:

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

  Diese Methode wird am wenigsten empfohlen, da Sie verschiedene Situationen berücksichtigen müssen und es manchmal zu Unmöglichkeiten kommt bis Erwartete Leerzeichen. Diesen Trick sollte man am besten nicht anwenden.

  Methode 5: Folgen Sie dem Anfang und dem Ende

  Eine andere Möglichkeit, HTML-Tags zu verwenden, besteht darin, das schließende Tag eines Elements in der Nähe zu platzieren Das Eröffnungs-Tag des nächsten Elements:

  <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 unabhängig von der Lesbarkeit des Codes lieber von Hand entfernen.

  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, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

  Verwandte Empfehlungen:

  Express-Code-Analyse mit HTML-Vorlagen
  

  Das obige ist der detaillierte Inhalt vonSo entfernen Sie Inline-Block-Leerzeichen in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!