Как я могу получить место, чтобы занять место?

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 к своему идентификатору

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

Если вы не хотите указывать высоту, лучше всего добавить   в свой тег

Другой способ, вы можете добавить: после для # p1

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