首頁 >web前端 >html教學 >如何在HTML中刪除內聯/內聯塊元素之間的空格？

如何在HTML中刪除內聯/內聯塊元素之間的空格？

WBOY轉載: 2023-09-14 20:21:04802瀏覽

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

帶空格的內聯塊元素

我們將使用值為 inline-block 的 display 屬性來設定內嵌區塊元素的樣式 -

nav a {
   display: inline-block;
   background: blue;
   color: white;
   text-decoration: none;
   font-size: 35px;
}

我們已經為下面給定的

<nav>
   <a href="#">Tutorials</a>
   <a href="#">point</a>
</nav>

現在讓我們來看看新增帶空格的內聯塊元素的完整範例 -

範例

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements</title>
   <style>
      nav a {
         display: inline-block;
         background: blue;
         color: white;
         text-decoration: none;
         font-size: 35px;
      }
   </style>
</head>
<body>
   <h1>The inline-block elements</h1>
   <p>Below are the inline-block elements with space:</p>
   <nav>
      <a href="#">Tutorials</a>
      <a href="#">point</a>
   </nav>
</body>
</html>

使用 font-size 屬性刪除內聯區塊元素之間的空格

我們可以使用 font-size 屬性來刪除內嵌區塊元素之間的空格。 font-size 屬性會影響元素文字的大小。以下是可能的值 -

xx-small - 將元素文字的大小設定為小於 x-small 值所產生的大小。
x-small - 將元素文字的大小設定為小於值small所產生的大小。
small - 將元素文字的大小設定為小於中位數產生的大小。
medium - 將元素文字的大小設定為小於值large所產生的大小，並大於值small所產生的大小。
李>
#large - 將元素的文字設定為大於中位數結果的大小。
x-large - 將元素文字的大小設定為大於值large所產生的大小。
xx-large - 將元素文字的大小設為大於值 xlarge 所產生的大小。
larger - 將元素的文字設定為大於其父元素的文字。
smaller - 將元素的文字設定為小於其父元素的文字。
length - 任何允許的長度值。 font-size 不允許使用負長度值。
百分比 - 設定元素相對於其父元素的文字大小。

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

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements without space</title>
   <style>
      nav {
         font-size: 0;
      }
      nav a {
         display: inline-block;
         background: blue;
         color: white;
         text-decoration: none;
         font-size: 35px;
      }
   </style>
</head>
<body>
   <h1>The inline-block elements</h1>
   <p>Below are the inline-block elements without space:</p>
   <nav>
      <a href="#">Tutorials</a>
      <a href="#">point</a>
   </nav>
</body>
</html>

使用 marginright 屬性刪除內聯塊元素之間的空格

我們可以使用 margin-right 屬性來刪除內聯塊元素之間的空間 -

範例

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements without space</title>
   <style>
      nav a {
         display: inline-block;
         background: blue;
         margin-right: -4px;
         color: white;
         text-decoration: none;
         font-size: 35px;
      }
   </style>
</head>
<body>
   <h1>The inline-block elements</h1>
   <p>Below are the inline-block elements without space:</p>
   <nav>
      <a href="#">Tutorials</a>
      <a href="#">point</a>
   </nav>
</body>
</html>

以上是如何在HTML中刪除內聯/內聯塊元素之間的空格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html Length display margin

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：HTML DOM compareDocumentPosition() 方法比較文件位置下一篇：HTML DOM compareDocumentPosition() 方法比較文件位置

看更多