資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 HTML 中去除內聯/內聯塊元素之間的空格？
我們可以輕鬆地去除內聯塊元素之間的空格。在繼續之前，讓我們先建立一個 HTML 文件，並新增帶有空格的內聯塊元素。
帶有空格的內聯塊元素
我們將使用 `display` 屬性（值為 `inline-block`）為內聯塊元素設定樣式 -
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` 值產生的尺寸更小。
medium - 將元素的文字設定為比 `large` 值產生的尺寸更小，並且比 `small` 值產生的尺寸更大。
large - 將元素的文字設定為比 `medium` 值產生的尺寸更大。
x-large - 將元素的文字設定為比 `large` 值產生的尺寸更大。
xx-large - 將元素的文字設定為比 `xlarge` 值產生的尺寸更大。
larger - 將元素的文字設定為比其父元素更大。
smaller - 將元素的文字設定為比其父元素更小。
length - 任何允許的長度值。負長度值不允許用於 `font-size`。
percentage - 相對父元素設定元素的文字大小。
現在讓我們看一個去除內聯塊元素之間空格的示例 -
<!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` 屬性去除內聯塊元素之間的空格
我們可以使用 `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>
更新於: 2022年10月16日
1K+ 次瀏覽
廣告