Question

朋友。我使用 atom 来编写html代码。每当我输入单词＆＃34; p＆＃34;时，它就会自动生成3行代码：

＆＃13;

<p>

</p>

＆＃13;

现在我给出一个内联类，将两个p元素放在一行中：

＆＃13;

.inline {
  display:inline-block;
 }

＆＃13;

<p class="inline">
  Hi, friend
</p>
<p class="inline">
  s
</p>

＆＃13;

我希望它在浏览器中显示＆＃34;嗨，朋友＆＃34; ，但它显示＆＃34;嗨，朋友s＆＃34; 朋友之间的空间＆＃34;和＆＃34; s＆＃34;。我知道问题是html将换行视为空格。所以如果我将代码编写为Hi, friends，那么我可以得到我想要的结果。所以我有两个问题：

在多行代码中可以避免不必要的空间吗？（我尝试在网上搜索，只得到答案＆＃34;否＆＃34;：Advanced HTML multiline formatting - removing not need spaces from new lines ）
如果No.1不能，我可以使用原子在中将p元素自动填充为mv vendor vendor_bak吗？（实际上，自动完成代码后，我可以使用Ctrl + J连接两行。但是，这仅适用于两行（不是3行或更多行），并且会将原始换行符更改为空格）

真诚地等待答案。感谢。

Answer 1

最终编辑：

这个答案错了，我知道这是错的。我将其留给子孙后代，因为下面的一些信息仍然有用。

编辑：忘记我在下面写的所有内容 - 问题只是您的CSS设置为inline-block，而不是inline。

.inline {
    /*display:inline-block;*/
    display: inline;
 }

~~看看这篇文章：~~

How to remove the space between inline-block elements?

这是已知的内联块元素的预期行为。并且它不仅仅是空间，因为元素中的新行 - 即使它们在同一行上也会发生，如下所示：

Hi, friend s

有一些处理此行为的已知技术（请参阅here和here - 它们都不是超级漂亮，但它是现实情况。

总结上面的链接，它们基本上是试图以非常可怕或痛苦的方式删除编辑器中的空格我的首选方法是注释空格，如下所示：

Hi, friends

......但它确实取决于偏好。

~~或者，您可以利用floats或flexbox等其他选项来实现您的目标。~~

Answer 2

您好，您可以删除空格，查看我的小提琴here

你可以通过像这样保持一行

来做到这一点

<p>Hi, friend</p><p>s</p>

p{
    margin: 0;
    display: inline;
}

或通过这种方法

<div class="parent1">
  <p>Hi, friend</p>
  <p>s</p>
</div>

p{
    margin: 0;
    display: inline;
}
.parent1 { 
    font-size: 0;
}
.parent1 p {
    font-size: 16px;
}

Answer 3

试试display:table-cell - 就像这样：

.inline {
  display: table-cell;
}

<p class="inline">
  Hi, friend
</p>
<p class="inline">
  s
</p>

跨多行包装标记时如何避免空格

3 个答案: