数据结构
网络
关系型数据库管理系统
操作系统
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+ 次浏览
广告