html - 如何获得空间来占用空间？

Question

我需要一个有空格的段落来占用空间。

这个小提琴表明空间呈现完全一样：

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

我怎样才能达到这个效果？

Answer 1

使用不间断的空格。

<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>