如何移除inline-block元素之间的空格？

百变鹏仔 4周前 (09-21) #HTML

文章标签空格

我们可以轻松删除内联块元素之间的空格。在继续之前，让我们首先创建一个 HTML 文档并添加带空格的内联块元素 -

示例

<!DOCTYPE html><html><head>   <title>Inline block elements</title>   <style>      li {         display: inline-block;         width: 150px;         font-size: 18px;      }      li:nth-child(1) {         background: green;         color: white;      }      li:nth-child(2) {         background: orange;         color: black;      }      li:nth-child(3) {         background: blue;         color: white;      }      li:nth-child(4) {         background: red;         color: black;      }   </style></head><body>   <h1>Free Tutorials</h1>   <p>We have the following tutorials right now:</p>   <ul>      <li>Java</li>      <li>Python</li>      <li>Machine Learning</li>      <li>Automation</li>   </ul></body></html>

现在让我们看一些删除内联块元素之间的空格的示例 -

删除内联块元素之间的空格

我们可以通过将无序列表项排列在一行中来删除内联块元素之间的空格 -

示例

<!DOCTYPE html><html><head>   <title>Inline block elements</title>   <style>      li {         display: inline-block;         width: 150px;         font-size: 18px;      }      li:nth-child(1) {         background: green;         color: white;      }      li:nth-child(2) {         background: orange;         color: black;      }      li:nth-child(3) {         background: blue;         color: white;      }      li:nth-child(4) {         background: red;         color: black;      }   </style></head><body>   <h1>Free Tutorials</h1>   <p>We have the following tutorials right now:</p>   <ul>      <li>Java</li><li>Python</li><li>Machine Learning</li><li>Automation</li>   </ul></body></html>

通过跳过结束标记来删除内联块元素之间的空格

我们还可以通过跳过分类标签来删除空格 -

示例

<!DOCTYPE html><html><head>   <title>Inline block elements</title>   <style>      li {         display: inline-block;         width: 150px;         font-size: 18px;      }      li:nth-child(1) {         background: green;         color: white;      }      li:nth-child(2) {         background: orange;         color: black;      }      li:nth-child(3) {         background: blue;         color: white;      }      li:nth-child(4) {         background: red;         color: black;      }   </style></head><body>   <h1>Free Tutorials</h1>   <p>We have the following tutorials right now:</p>   <ul>      <li>Java      <li>Python      <li>Machine Learning      <li>Automation   </ul></body></html>

文章推荐

如何移除inline-block元素之间的空格？

示例

删除内联块元素之间的空格

示例

通过跳过结束标记来删除内联块元素之间的空格

示例

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8