我們可以輕鬆刪除內嵌區塊元素之間的空格。在繼續之前，讓我們先建立一個 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 屬性會影響元素文字的大小。以下是可能的值 -
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>
我們可以使用 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中文網其他相關文章！
