Add a new line in before heading

Question

  <div class="row">
  <div>      

    <h2>{{ _('Why this matters') }}</h2>

    <div class="markdown">{{ task.why_this_matters_html }}</div>
  </div>
  </div>

I want a blank line before the heading "Why this matters". I used < br >. But have read that
is not a good practice to be done. Any help would be appreciated.

Heading elements are block-level (by default). So what's the reason behind adding a new line before such elements? — Hashem Qolami, Oct 16 '14 at 20:25

score 5 · Answer 1 · answered Oct 16 '14 at 20:38

Referring to pianoman99's answer, I would use the actual line height and an em value.

h2 {
  margin-top: 1.2em;
}

That way it scales better with the text and the space is nearly a line, according to the MDN page for line-height

But of course you may want to change the values based on your project.

score 2 · Answer 2 · answered Oct 16 '14 at 20:32

2

div.row h2{
margin-top: 10px;
}

You can be more spesific and write it like this to make the css code affect only this h2 header not all header if you have more than one in your page

div#ro

answered Oct 16 '14 at 20:32

Samer Allahham

76
11

Ian Hazzard · Accepted Answer · 2014-10-16T20:39:22.887

1

Use this CSS:

h2
{
margin-top:10px;
}

Is that what you are looking for?

Here's what it would look like:

 div.row h2{
    margin-top: 20px;
    }

<div class="row">
  <div>      

<h2>{{ _('Why this matters') }}</h2>

<div class="markdown">{{ task.why_this_matters_html }}</div>
  </div>
  </div>

edited Oct 16 '14 at 20:39

answered Oct 16 '14 at 20:24

Ian Hazzard

7,661
7
34
60

Add a new line in before heading

3 Answers3