在html中跳过一行的最佳方法？

Question

我已经阅读并访问了很多网站，但没有一个网站为我提供了简单的解决方案。我想知道在 html 中添加/跳过一行的最佳方法是什么？我主要使用的是两个<br /> 标签，但我知道有一个更简单的解决方案。有没有办法跳过一行，使用 css，而不是这样做：

<p>Hello. <br /><br />This is a test</p> 

Answer 1

您可以简单地使用 2 个单独的段落 (<p>) 标签。例如：

<p>Hello.</p>
<p>This is a test</p> 

这是demo。

Answer 2

从语义上讲，这取决于您的目的。在这种情况下做最好的事情。一些例子。

1. 如果您确实需要跳过一行，即在文本中有一个没有任何内容的空行，那么请务必使用两个 <br> 元素。

   This is one line of text<br>
   This is also one line of text<br>
   The next line happens to be empty<br>
   <br>
   And here is another line, not empty<br>
   

   等等。

2. 但是，如果您想在两个散文块之间创建一些空白，那么这两个块应该是段落，如其他答案中所述。

3. 如果第一部分是一堆单独的行，但第二部分是一篇散文，那么只有第二部分需要是一个段落。也无需将第一部分包含在<p> 标签中。示例：

   Add the water to the recipe<br>
   Add the salt<br>
   
   <p>Note: stir thoroughly!</p>
   

4. 如果您的意图实际上是分隔两行文本，以表示它们不属于一起，您可以使用<hr>。如果你愿意，可以让它不可见。

   This is some text
   <hr style="opacity:0">
   This is some unrelated text
   

5. 如果下一行恰好是对正文后半部分的介绍，请将其更改为<h4>（即您在此处需要的任何级别的标题）。

   The last line of the previous section
   <h4>Introduction</h4>
   The fist line of the next section
   

   这是可行的，因为标题也内置了边距。

6. 最后，如果您有一个现有的 html 片段，并且您的两个文本块已经包含在两个 HTML 元素中，那么您不必更改标记；您需要做的就是在 CSS 中为这些元素设置顶部和底部边距。
   假设他们在<section>s：

   <style>
     section {margin:1em 0}
   </style>
   ...
   ... The last line of the previous section</section>
   <section>The fist line of the next section ...
   

Answer 3

我认为使用 br 标签总是一个坏主意。尝试使用段落、css 填充、css 边距、hr。尽量避免使用 br，因为它不是 semantic，并在您的网站中使用正确的标签“帮助搜索”引擎“了解您的网站”

Answer 4

你可以用 div 包围 'Hello' 并添加 maring-bottom 的 css 例如：

<p>
    <div style='margin-bottom: 40px;'>Hello.</div>
    This is a test
</p>

Answer 5

<p>Hello. <br />   <br> This is a test</p>

Answer 6

使用块级元素会有所帮助。例如，p 是一个块级元素，它会给出换行符。

因此您可以将文本分成两段。并将页边距/填充设置为段落

使用<br> 是一种不好的方法。

Answer 7

尝试在需要空格的地方使用它：

     

如果你想要多个空格，那么像这样依次重复代码：

     
     

等等