Wie entferne ich Leerzeichen zwischen Inline-Block-Elementen?-HTML-Tutorial-php.cn

Wie entferne ich Leerzeichen zwischen Inline-Block-Elementen?

PHPz

Freigeben： 2023-09-22 22:25:02

nach vorne

1457 Leute haben es durchsucht

Wie entferne ich Leerzeichen zwischen Inline-Block-Elementen?

Wir können Leerzeichen zwischen Inline-Blockelementen problemlos entfernen. Bevor wir fortfahren, erstellen wir zunächst ein HTML-Dokument und fügen ein Inline-Blockelement mit Leerzeichen hinzu –

Beispiel

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements</title>
   <style>
      li {
         display: inline-block;
         width: 150px;
         font-size: 18px;
      }
      li:nth-child(1) {
         background: green;
         color: white;
      }
      li:nth-child(2) {
         background: orange;
         color: black;
      }
      li:nth-child(3) {
         background: blue;
         color: white;
      }
      li:nth-child(4) {
         background: red;
         color: black;
      }
   </style>
</head>
<body>
   <h1>Free Tutorials</h1>
   <p>We have the following tutorials right now:</p>
   <ul>
      <li>Java</li>
      <li>Python</li>
      <li>Machine Learning</li>
      <li>Automation</li>
   </ul>
</body>
</html>

Nach dem Login kopieren

Sehen wir uns nun einige Beispiele für das Entfernen von Leerzeichen zwischen Inline-Blockelementen an -

Entfernen Sie Leerzeichen zwischen Inline-Blockelementen

Wir können Leerzeichen zwischen Inline-Blockelementen entfernen, indem wir ungeordnete Listenelemente in einer Zeile anordnen –

Beispiel

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements</title>
   <style>
      li {
         display: inline-block;
         width: 150px;
         font-size: 18px;
      }
      li:nth-child(1) {
         background: green;
         color: white;
      }
      li:nth-child(2) {
         background: orange;
         color: black;
      }
      li:nth-child(3) {
         background: blue;
         color: white;
      }
      li:nth-child(4) {
         background: red;
         color: black;
      }
   </style>
</head>
<body>
   <h1>Free Tutorials</h1>
   <p>We have the following tutorials right now:</p>
   <ul>
      <li>Java</li><li>Python</li><li>Machine Learning</li><li>Automation</li>
   </ul>
</body>
</html>

Nach dem Login kopieren

Entfernen Sie Leerzeichen zwischen Inline-Blockelementen, indem Sie schließende Tags überspringen

Wir können Leerzeichen auch entfernen, indem wir Kategorie-Tags überspringen –

Beispiel

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements</title>
   <style>
      li {
         display: inline-block;
         width: 150px;
         font-size: 18px;
      }
      li:nth-child(1) {
         background: green;
         color: white;
      }
      li:nth-child(2) {
         background: orange;
         color: black;
      }
      li:nth-child(3) {
         background: blue;
         color: white;
      }
      li:nth-child(4) {
         background: red;
         color: black;
      }
   </style>
</head>
<body>
   <h1>Free Tutorials</h1>
   <p>We have the following tutorials right now:</p>
   <ul>
      <li>Java
      <li>Python
      <li>Machine Learning
      <li>Automation
   </ul>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie entferne ich Leerzeichen zwischen Inline-Block-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!