Question

所以我在HTML中有一些由空格改变的代码。我的CSS：

span{height:200px;width:200px;border-width:1px;border-color:black;border-style:solid;display:inline-block}

我的HTML：

在：

<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>

后：

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>

第二个更容易阅读，但显示更改，我想要的显示是第一个显示，但第二个更容易编辑。有什么想法吗？

Answer 1

默认情况下，

Span为display: inline-block，遗憾的是它们确实会受到空格的影响。一种解决方案就是不要在它们之间使用空格，这更容易完成，特别是如果你的HTML是由PHP之类的预处理器生成的......另一种方式是：

<span></span><!--
--><span></span><!--
--><span></span><!--
--><span></span>

等。即使它仍然有些难看，但span之间没有空格，但仍然在不同的行上。

另一种方法是更改span的CSS，例如，将它们设为display: block和float: left，但这可能对您的情况不起作用。

Answer 2

此HTML没有什么不同，您可能正在修改的HTML编辑器中进行编辑，该编辑器会考虑换行符。如果是这样，那么无论如何都无法获得第二个HTML的第一个输出。

通过换行符更改的间距

2 个答案: