块元素、行内块和内联元素_如何删除内联块元素之间的空间？

块元素、行内块和内联元素

Introduction:

介绍：

This question has become rather popular. How does one remove whitespaces between the inline-block elements? The interesting thing is there are numerous solutions to this but not all of them are easy and most of them require JavaScript and all. So, what about people who have just started coding and have no idea about JavaScript and other languages? Well, there is nothing to be worried about, there are answers which do not require you to make use of JavaScript. So, let us move on and see how that is possible.

这个问题已经很流行了。 如何删除内联块元素之间的空格？ 有趣的是，有许多解决方案，但是并非所有解决方案都很简单，而且大多数都需要JavaScript。那么，刚刚开始编码但对JavaScript和其他语言一无所知的人呢？好了，没有什么可担心的，有一些答案不需要您使用JavaScript。因此，让我们继续前进，看看这是怎么可能的。

Solutions:

解决方案：

There are a couple of answers to this question but we will discuss only three of them. As you don't want to be confused in your initial stage of coding besides these answers are the best and they are very easy to understand and implement. So, without much delay let us move on with the answers.

这个问题有两个答案，但我们将只讨论其中三个。由于您不希望在编码的初始阶段感到困惑，因此这些答案是最好的，而且它们很容易理解和实现。因此，让我们毫不拖延地继续回答。

Method 1:

方法1：

First and foremost, you can solve this problem by using minimized HTML. Well, what does that mean? Right, it means that you can minimize the code of your HTML to achieve what you desire and that is to remove spaces between in-line block elements.

首先，您可以通过使用最小化HTML来解决此问题。好吧，那是什么意思？正确，这意味着您可以最小化HTML代码以实现所需的功能，即删除行内块元素之间的空格。

Well, it sounds pretty easy but how does one do it? For that, you will have to look at the syntax below for proper understanding.

好吧，这听起来很简单，但是怎么做到的呢？为此，您将必须查看以下语法以进行适当的理解。

Syntax:

句法：

<ul>
<li>
first</li><li>
second</li><li>
third</li><li>
</ul>

Method 2:

方法2：

Well, this was one method of minimizing HTML, there is one more way besides this one by which you can achieve the same result. So, look at the syntax below to get the idea.

好吧，这是最小化HTML的一种方法，除此之外，还有另一种方法可以使您获得相同的结果。因此，请查看下面的语法以了解它。

Syntax:

句法：

<ul>
<li>first</li
><li>second</li
><li>third</li>
</ul>

The code here might seem a bit weird and it is not the conventional code but still, this trick helps in removing the spaces between the inline-block elements. Well, these two would surely work but there is one more trick that you can use for solving the problem.

这里的代码似乎有点怪异， 它不是常规代码，但是仍然可以消除内联块元素之间的空格。好吧，这两个肯定会起作用，但是还有一个技巧可以用来解决问题。

Method 3:

方法3：

You would be amazed to know this trick. In this trick, all you need to do is make use of comments while creating inline-block elements. Well, yes it sounds a bit confusing but the trick is very efficient and you will surely get what you desire. So have a look at the syntax for the implementation.

您会惊奇地知道这个把戏。在此技巧中，您要做的就是在创建内联块元素时利用注释。好吧，是的，这听起来有点令人困惑，但是窍门非常有效，您一定会得到想要的东西。因此，请看一下实现的语法。

Syntax:

句法：

<ul>
<li>first</li><!--
--><li>second</li><!--
--><li>third</li>
</ul>

Syntax:

句法：

<ul>
<li>first</li><!--
--><li>second</li><!--
--><li>third</li>
</ul>

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: none
}
li {
background: pink;
display: inline-block;
padding: 4px;
}
</style>
</head>
<body>
<ul>
<li>this</li>
<li>is</li>
<li>Includehelp</li>
</ul>
</body>
</html>

Output

输出量

How to remove the space between inline-block elements?

Well, these tricks are pretty amazing. But these are not all, there are more tricks out there but if you have just started your work in web development then these tricks would surely help you whenever you come across the same problem and otherwise, you are always free to explore some other tricks which you may find suitable.

好吧，这些技巧真是太神奇了。但这还不是全部，还有更多的技巧，但是如果您刚开始进行Web开发，那么这些技巧一定会在遇到相同问题时为您提供帮助，否则，您总是可以自由探索其他技巧您可能会找到合适的。