HTML如何删除行内块元素之间的空间-之路教程

←HTML如何删除下拉列表中默认箭头图标

HTML显示字符串时如何保留空格和换行符→

删除内联块元素之间的空间的技巧

我们可以借助 CSS 属性来解决这个问题。

此外，一些技巧可以消除内联块元素之间的空间。

让我们讨论以下示例并给出解决方案。

创建一个 <ul> 标签，用于指定一个无序列表。

<ul> 标签是块级元素。创建 <li> 标签。

无序列表的每个元素都在 <li> 标签内声明。

使用 :nth-child() 伪类将样式放在接下来的两个 <li> 标签中。

添加带有空格的内联块元素的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      li {
        display: inline-block;
        width: 150px;
        font-size: 20px;
        color: #eeeeee;
      }
      li:nth-child(1) {
        background: #1c87c9;
      }
      li:nth-child(2) {
        background: #666666;
      }
      li:nth-child(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </body>
</html>

其中我们看到内联块元素之间的空间。
因此，让我们使用一些技术删除空格。

最简单的方法是执行以下操作：

<ul>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>

你甚至可以完全像这样跳过某些结束标签：

<ul>
  <li>Item 1
  <li>Item 2
  <li>Item 3
</ul>

让我们看看另一种使用 margin-right 属性去除空格的方法。

在下面的例子中，我们设置了 margin-right: -4px;它删除了我们元素之间的空格。

使用 margin-right 属性删除行内块元素之间的空间的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav a {
        display: inline-block;
        background: #1c87c9;
        margin-right: -4px;
        color: white;
        font-weight: bold;
        text-decoration: none;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#">Hello</a>
      <a href="#">Onitroad</a>
      <a href="#">World</a>
    </nav>
  </body>
</html>

我们可以通过将 <nav> 的 font-size 属性设置为 0 来获得相同的结果。

使用 font-size 属性删除行内块元素之间的空间的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav {
        font-size: 0;
      }
      nav a {
        display: inline-block;
        background: #1c87c9;
        font-size: 25px;
        color: white;
        font-weight: bold;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#">Hello</a>
      <a href="#">Onitroad</a>
      <a href="#">World</a>
    </nav>
  </body>
</html>

我们可以使用 Flexbox 删除空格。

阅读注释以了解为什么我们应该使用带有 display 属性的扩展。

使用 Flexbox 删除内联块元素之间的空间的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        display: -webkit-box;/* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;/* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;/* TWEENER - IE 10 */
        display: -webkit-flex;/* NEW - Chrome */
        display: flex;/* NEW, Spec - Opera 12.1, Firefox 20+ */
      }
      strong {
        display: inline-block;
        width: 150px;
        font-size: 20px;
        padding: 20px;
        color: #eeeeee;
        text-align: center;
      }
      strong:nth-child(1) {
        background: #1c87c9;
      }
      strong:nth-child(2) {
        background: #666666;
      }
      strong:nth-child(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>如何删除内联块元素之间的空间</h2>
    <div>
      Item 1
      Item 2
      Item 3
    </div>
  </body>
</html>

CSS float 属性也可以提供帮助。

使用 float 属性删除内联块元素之间的空间的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        clear: both;
        content: " ";
        display: table;
      }
      span {
        display: inline-block;
        width: 150px;
        font-size: 18px;
        padding: 10px 15px;
        text-align: center;
        color: #eeeeee;
        float: left;
      }
      span:nth-child(1) {
        background: #1c87c9;
      }
      span:nth-child(2) {
        background: #666666;
      }
      span:nth-child(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div>
      <span>Item List1</span>
      <span>Item List2</span>
      <span>Item List3</span>
    </div>
    <p>Some text</p>
  </body>
</html>

HTML如何删除行内块元素之间的空间

删除内联块元素之间的空间是最常见的问题之一。
一系列内联块元素之间通常会有空间。

日期：2020-06-02 22:15:11 来源：oir作者：oir