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

The best way to skip a line in html?

提问by Lebone

I've read and visited a lot of websites, but none of them have provided me with a simple solution. What i want to know is what's the best way to add/skip a line in html? What I mostly use is two <br />tags, but I know that there is a simpler solution to the problem. Is there a way to skip a line, using css, instead of doing this:

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

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

回答by nicost

You could simply use 2 separate paragraph (<p>) tags. For example:

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

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

Here's a demo.

这是一个演示。

回答by Mr Lister

Semantically, it depends on your purpose. Do whatever's best in the situation. Some examples.

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

1. If you literally need to skip a line, that is, have a empty line with nothing on it in your text, then by all means use two <br>elements.

   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>
   

   And so on.

2. However, if you want to create some blank space between two blocks of prose, then the two blocks should be paragraphs, as mentioned in the other answers.

3. And if the first part is a bunch of individual lines, but the second part is a piece of prose, only the second part needs to be a paragraph. No need to enclose the first part in <p>tags as well. Example:

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

4. If your intention is to actually separatetwo lines of text, to signify they don't belong together, you can use a <hr>. Make it invisible if you want.

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

5. If the next line happens to be an introduction to the later half of the text, change it into a <h4>(that is, a header at whatever level you require here).

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

   This works because headers also have margins built in.

6. Lastly, if you have an existing piece of html with your two blocks of text already in two HTML elements, you don't necessarily have to change the markup; all you need to do is set top and bottom margins for those elements in the CSS.
   Suppose they are in <section>s:

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

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. 如果下一行恰好是对文本后半部分的介绍，请将其更改为 a <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 ...
   

回答by Szántó Zoltán

I think that using br tag is always a bad idea. Try using paragraphs, css padding, css margin, hr. Try avoiding br because it's not semanticand using the proper tag in your site "helps the search" engines to "understand your site"

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

回答by ItayB

You can surround the 'Hello' with div and add css of maring-bottom for example:

您可以用 div 包围“Hello”并添加 maring-bottom 的 css，例如：

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

回答by Steven Alves

Try using this where you want the blank space:

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

     

If you want multiple blank spaces, then repeat the code successively like this:

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

     
     

etc.

等等。

回答by Fabio Ros

<p>Hello. <br /> &nbsp; <br> This is a test</p>

<p>Hello. <br /> &nbsp; <br> This is a test</p>

回答by Rovi

Using block level elements would help. for example, p is a block level element which would give the line break.

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

so you can have the text in two paragraphs. and have the margin/padding set to the paragraph

所以你可以有两段​​文字。并将边距/填充设置为段落

using <br>is a bad approach.

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