我知道使用内联块元素时会产生不必要的空白区域。
但是为什么在这个例子中这两个内联链接元素之间有一点空间呢？
你可以看到它们分为两行，如果我将它们并排放置并删除文本编辑器中的空格，那么空间就会消失，但是它肯定会忽略我文本编辑器中的空间？
<body>
<a href="#">link 1</a>
<a href="#">Link 2</a>
</body>
链接之间有空格。
<body>
<a href="#">link 1</a><a href="#">Link 2</a>
</body>
这不是。
感谢。
答案 0 :(得分：3)
当您在两个元素之间添加一个新行时，将在它们之间添加一个空格，如下所示。
<body>
<a href="#">link 1</a>
<a href="#">Link 2</a>
</body>
以上和以下相同，
<body>
<a href="#">link 1</a> <a href="#">Link 2</a>
</body>
如果您没有给出任何空格或新行，那么元素之间就不会有任何空格。
<body>
<a href="#">link 1</a><a href="#">Link 2</a>
</body>
即使您在元素之间提供两个空格，如下所示，也只会使用一个空格进行渲染。
<body>
<a href="#">link 1</a> <a href="#">Link 2</a>
</body>
因此，如果您需要多个空格，则必须使用 ，如下所示。
<body>
<a href="#">link 1</a> <a href="#">Link 2</a>
</body>
答案 1 :(得分：3)
可以使用不同的选项来避免显示空白区域，在您的示例中，您可以：
将a-tags显示为内联块并将它们向左浮动https://jsfiddle.net/hfgjwj55/3/
a {
display: inline-block;
float: left;
}
在包装器（在本例中为正文）上设置字体大小0，并将a-tags的字体大小设置为例如16px的 https://jsfiddle.net/hfgjwj55/2/
body {
font-size: 0;
}
a {
font-size: 16px;
}
在元素之间添加html注释
答案 2 :(得分：2)
这对我来说也是一个很大的问题。
我通常总是这样解决：https://jsfiddle.net/g7h0fbyn/
<a href="#">link 1</a><!--
--><a href="#">Link 2</a>
在stackoverflow上已经有一个问题，有一个非常好的答案，你应该看一下：How to remove the space between inline-block elements?
答案 3 :(得分：0)
这是因为如果在HTML代码中放置任意数量的空格，它将被转换为一个空格。
1
<body>
<a href="#">link 1</a>
<a href="#">Link 2</a>
</body
新行将在两个元素之间添加一个空格。所以无论是一个空格还是多个，它都被认为是两个元素之间的一个空白区域。
2
<body>
<a href="#">link 1</a> <a href="#">Link 2</a>
</body>`
以上两种情况之间都会有一个空格。虽然下面的代码之间没有任何空格
<body>
<a href="#">link 1</a><a href="#">Link 2</a>
</body
如果您想要多个空格，请使用 ，如下所示：
<body>
<a href="#">link 1</a> <a href="#">Link 2</a>
</body
答案 4 :(得分：0)
浏览器没有看到需要哪个空格的区别，哪个不是;所有空格都折叠成一个空格字符（除非pre等指定）。
除了删除源代码中的空格外，一种可能的（虽然有点棘手）解决方案是全局地将font-size全局设置为0并为特定元素重置它。
另一种方法是将这样的空白注释掉：
<a href="#">link 1</a>
<a href="#">Link 2</a>
虽然这可能有点混乱。
有一些方法可以完全避免这个问题，例如使用Flexbox，但这可能对你的例子有点过分。
答案 5 :(得分：-1)
您可以添加左边距以删除空白区域。
a{
margin-left:-4px;
}