如何在HTML中刪除內聯/內聯塊元素之間的空格？-html教學-PHP中文網

帶空格的內聯塊元素

範例

The inline-block elements

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

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

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 14, 2023 pm 08:21 PM

刪除空格內聯元素內聯塊元素

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

我們可以輕鬆刪除內嵌區塊元素之間的空格。在繼續之前，讓我們先建立一個 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 id="The-inline-block-elements">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 id="The-inline-block-elements">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 id="The-inline-block-elements">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中文網其他相關文章！

本網站聲明

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7784

Java教學

1644

CakePHP 教程

1400

Laravel 教程

1297

PHP教程

1234

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。