How can I insert vertical blank space into an HTML document?

Question

I am writing a quiz in HTML and I would like to insert a consistent blank vertical space between questions (like one would use vspace{3 cm} in LaTeX).

For example:

<html>
  <body>
    <p>
     This is the first question?
      <!-- This is where I want about 3 cm of space -->
    </p>
    <p>
     This is the second question?
     <!-- This is where I want about 3 cm of space -->
    </p>
  </body>
</html>

Is there a straightforward way of doing this using just HTML and CSS?

How can I insert vertical blank space into an HTML document?

score 62 · Accepted Answer · edited Oct 01 '22 at 16:02

62

Read up some on CSS. It's fun: CSS: em, px, pt, cm, in…

<style>
  .bottom-three {
     margin-bottom: 3cm;
  }
</style>


<p class="bottom-three">
   This is the first question?
</p>
<p class="bottom-three">
   This is the second question?
</p>

edited Oct 01 '22 at 16:02

Peter Mortensen

30,738
21
105
131

answered Feb 04 '12 at 13:04

DMCS

31,720
14
71
104

4

thanks, that was the clue I needed - I actually created a class for quiz questions and then put each question inside
. works great.
– DQdlM Feb 04 '12 at 18:16

score 27 · Answer 2 · edited Oct 01 '22 at 16:03

27

While the previous answers are probably best for this situation, if you just want to do a one-off and don't want to bother with modifying other files, you can in-line the CSS.

<p style="margin-bottom:3cm;">This is the first question?</p>

edited Oct 01 '22 at 16:03

Peter Mortensen

30,738
21
105
131

answered Feb 19 '18 at 22:00

SMBiggs

11,034
6
68
83

score 20 · Answer 3 · edited Oct 01 '22 at 16:04

20

I always use this cheap word for vertical spaces.

    <p>Q1</p>
    <br>
    <p>Q2</p>

edited Oct 01 '22 at 16:04

Peter Mortensen

30,738
21
105
131

answered May 21 '19 at 10:44

narendra singh

209
2
4

1

simple and quick – taranaki Jul 02 '21 at 19:38
2

What do you mean by *"cheap word"*? Can you elaborate? – Peter Mortensen Oct 01 '22 at 16:04

score 12 · Answer 4 · edited Oct 01 '22 at 15:57

12

Write it like this:

p {
    padding-bottom: 3cm;
}

Or

p {
    margin-bottom: 3cm;
}

edited Oct 01 '22 at 15:57

Peter Mortensen

30,738
21
105
131

answered Feb 04 '12 at 12:51

sandeep

91,313
23
137
155

thanks, that helps a lot. I am still learning to think "html" as I switch away from LaTeX. – DQdlM Feb 04 '12 at 18:17
3

Off topic, but I'm curious why you seem to feel HTML is better for this purpose than LaTeX? – scala_is_awesome Nov 29 '12 at 20:39
2

@scala_is_awesome I know this comment is very very old but I just happened upon it so in case you are still curious... I use LaTeX a lot for my class materials but I have started using html more and more for things that do not need the high polish of LaTeX and will go up on my class webpage. They are a bit easier to edit on the fly and are easier to share in an editable format for Word-only users, since Word can parse html. – DQdlM Jun 17 '13 at 13:33

How can I insert vertical blank space into an HTML document?

4 Answers4

Linked

Related