如何移除inline-block元素之間的空格？-html教學-PHP中文網

範例

Free Tutorials

刪除內聯區塊元素之間的空格

透過跳過結束標記來刪除內聯區塊元素之間的空格

首頁

web前端

html教學

如何移除inline-block元素之間的空格？

Sep 22, 2023 pm 10:25 PM

移除空格 inline-block 元素間隔

如何移除inline-block元素之間的空格？

我們可以輕鬆刪除內嵌區塊元素之間的空格。在繼續之前，讓我們先建立一個 HTML 文件並添加帶有空格的內聯區塊元素 -

範例

<!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 id="Free-Tutorials">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>

登入後複製

現在讓我們來看一些刪除內聯區塊元素之間的空格的範例 -

刪除內聯區塊元素之間的空格

我們可以透過將無序列表項排列在一行中來刪除內聯區塊元素之間的空格 -

範例

<!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 id="Free-Tutorials">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>

登入後複製

透過跳過結束標記來刪除內聯區塊元素之間的空格

我們也可以透過跳過分類標籤來刪除空格 -

範例

<!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 id="Free-Tutorials">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>

登入後複製

以上是如何移除inline-block元素之間的空格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn