我如何获得占用空间的空间？

Question

我需要带空格的段落来占据空间。

This小提琴表明，空间渲染完全等于什么都没有：

<p class='p1'>1</p>
<p class='p1'>2</p>
<p class='p1'> </p>
<p class='p1'>4</p>

我怎么能达到这种效果？

Answer 1

使用non-breaking space。

<p class='p1'>1</p>
<p class='p1'>2</p>
<p class='p1'>&nbsp;</p>
<p class='p1'>4</p>

Answer 2

您可以将height: 20px添加到您的ID

https://jsfiddle.net/viethien/L2eoyxhn/

如果您不想放高，最好的方法是在标签中添加 

另一种方法，您可以为＃p1添加：after

#p1:after {
    content: '\200b';
}

https://jsfiddle.net/viethien/L2eoyxhn/7/

Answer 3

我认为这<p id='p1'> </p>不是一个好的模式，我的解决方案是创建许多具有不同空间的类

p {
  border: 1px solid black;
}

.space-medium {
  margin-top: 50px;
}

.space-low {
  margin-top: 20px;
}

<p id='p1' class="space-low">1</p>
<p id='p2' class="space-low">2</p>
<p id='p4' class="space-medium">4</p>