CODEWITHSUNDEEP
htmlcssmargin
Belial
Belial

Reputation: 668

How I can set margin between lines in one paragraph?

I need to set margins between lines in one paragraph. How I can do this? I need to make something like this:

enter image description here

HTML:

<p>Any creative project is unique 
and should be provided with 
the appropriate quality</p>

I tried to put each line in <span> and set margin-bottom to it, but it not working.

Upvotes: 0

Views: 4236

Answers (4)

Bhuwan
Bhuwan

Reputation: 16855

Just wrap your whole text in a <span> tag and use line-height for margins and padding for spacing between text and background

Stack Snippet

p {
  font: bold 30px Verdana;
}

span {
  background: red;
  line-height: 45px;
  color: #fff;
  padding: 3px;
}
<p><span>Any creative project is unique and should be provided with the appropriate quality</span></p>

Upvotes: 4

Miguel
Miguel

Reputation: 36

Try using line-height property in your .css file referencing te element enclosing the text.

Upvotes: 0

caramba
caramba

Reputation: 22490

If you want to use <span> with margin you need to set also display: inline-block; or display: block; to the <span>

p {
    width: 200px;
}

p > span {
    display: inline-block;
    margin-bottom: 5px;
    background-color: orange;
}
<p>
  <span>Any creative project is unique</span>
  <span>and should be provided with</span>
  <span>the appropriate quality</span>
</p>

Upvotes: 1

user8022016
user8022016

Reputation:

U can use <br> between each lines or just put a span with a height between each line, something like this:

<p>Any creative project is unique</p>
<span style="height: 10px;"></span><p>panand should be provided with</p>

Upvotes: 0

Related Questions