如何在HTML中同时缩进和换行？

Question

我知道我可以使用<br>进行简单的换行。我也知道我可以通过向<p style="margin-left:12px">添加样式来添加缩进。

现在我有一个问题，那就是 <p> 会中断两行，就像插入<br><br>一样。

我无法对<br>应用样式，也无法弄清楚如何防止<p>出现 double 换行。

是否存在诸如元素 断行或类似元素？无论我在应用样式中添加什么元素，它们都具有双换行符，例如div。

外观

我想要的

some text
  some other text
    even more text

我能达到的目标

这是我使用三个<p>和 margin-left 样式的结果：

some text

  some other text

    even more text

这是我可以通过br实现的目标：

some text
some other text
even more text

Answer 1

尝试将跨度元素与float: left; clear: both;一起使用，然后使用所需的任何空白余量。

Answer 2

  

您可以使用此技巧来实现自己的目标

span{
display:block;
text-indent:12px;
}
span samp{
display:block;
text-indent:24px;
font-family:initial;
}

<p>
  Some text
  <span>
    Some other text
    <samp>Some other text</samp>
  </span>
  
</p>

Answer 3

<p>（段落元素）是块级元素。这意味着默认情况下它将被放置在新行中。

这就是为什么您看到双换行符。

因此，请使用<span>之类的内联元素将文本向右移动。

<p>some text<br/>
    <span style='margin-left:12px'>some other text</span><br/>
    <span style='margin-left:24px'>some more text</span></p>

Answer 4

从margin-top元素中删除页边距（最重要的是margin-bottom和p），使它们像文本行一样在另一行之后使用，然后使用<br>创建单个换行符。但是，如果要基于给定margin-left的位置添加p，则没有子代号1、2、3等的任何SCSS或硬编码值都无法做到这一点。其他关于相同问题的文章：

Post 1，post 2，post 3。

p {
  margin: 0;
}

<p>test test test test test test test test test</p>
<br>
<p>test test test test test test test test test</p>
<br>
<p>test test test test test test test test test</p>
<br>
<p>test test test test test test test test test</p>