How can I get a space to take up space?

Question

I need a paragraph with a space to take up space.

This fiddle shows that a space renders just the same as nothing at all:

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

How can I achieve this effect?

keep in mind that it is also is considered invalid HTML to have multiple elements with the same `id`, you should use classes instead — Nick Parsons, Jun 15 '19 at 04:08

Matt Schlosser · Answer 1 · 2019-06-20T17:05:24.400

2

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

edited Jun 20 '19 at 17:05

answered Jun 15 '19 at 03:52

Matt Schlosser

Hien Nguyen · Answer 2 · 2019-06-15T03:56:56.083

1

You can add height: 20px to your id

If you dont want to put height, the best way is adding   in your tag

Another way, you can add :after for #p1

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

edited Jun 15 '19 at 03:56

answered Jun 15 '19 at 03:52

Hien Nguyen

I don't want to have to manually match `height` to my `font-size`. – Jun 15 '19 at 03:53
you can add `padding-bottom: 7px;` in your css. @Hien – Anshu Jun 15 '19 at 04:04

score 0 · Answer 3 · 2019-06-15T04:37:56.347

0

I do not think this <p id='p1'> </p> is a good pattern, my solution is create many class with different space

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>

edited Jun 15 '19 at 04:37

answered Jun 15 '19 at 04:29

3 Answers3