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

Question

朋友。我正在使用 atom 编写 html 代码。每次输入“p”这个词，它就会自动生成3行代码：

<p>

</p>

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

.inline {
  display:inline-block;
 }

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

我希望它在浏览器中显示“Hi,friends”，但它显示的“Hi,friend s”在“friend”和“s”之间有一个空格。 我知道问题是html将换行符视为空格。因此，如果我将代码编写为<p class="inline">Hi, friend</p><p class="inline">s</p>，那么我可以获得我想要的结果。所以我有两个问题：

1. 多行写代码可以避免不必要的空格吗？（我尝试在网上搜索，只得到答案“No”：Advanced HTML multiline formatting - removing not need spaces from new lines）
2. 如果No.1不能，我可以在使用atom时只将p元素自动补全为<p></p>吗？（实际上，在自动补全代码后，我可以使用Ctrl+J来连接两个行。但是，这仅适用于两行（不是 3 行或更多行），并且会将原始换行符更改为空格）

真诚地等待答案。谢谢。

Answer 1

嗨，你可以删除空格，看我的小提琴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 2

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

.inline {
  display: table-cell;
}

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

Answer 3

最终编辑：

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

---

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

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

---

看看这篇文章：

How to remove the space between inline-block elements?

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

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

有处理这种行为的已知技术（参见here 和here——它们都不是超级漂亮的，但这是现实情况。

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

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

...但这真的取决于偏好。

或者，您可以利用其他选项，例如 floats 或 flexbox 来实现您想要的。