Is it possible to re-create this using one <p> element?

HTML & CSS
1

Hi, i’d like to create the attached image using just one <p> element and some css. I’m sure i’ve done it before somewhere but i’m just having a total css writers block. The main thing i cannot see / remember how to do is the vertical spacing between lines. I’m sure it’s simple, but i just cannot think what css property i’m forgetting to use.

Thanks for any advice at all!

2

Try this:



 <p style='padding:2em'>
  Lorem isum dolar...
 </p>
3

Hi John. Thanks for the reply but that won’t work for this. If i was using 3 <p> elements for this, then yes, that would work. But i’d like to do it in one <p> element as that makes sense semantically!

Cheers
John

4

I do not understand :frowning:

If the text is “Lorem ipsum …” and not an image then using “line-height:2em” may achieve the desired result.

5

What i need is to have the background colour of each line to be white, but then there needs to be a margin-bottom:5px between each line. As you can see, there are 3 lines. Maybe i’ll just do multiple p elements…

Cheers

6

In the end i threw a <span> in there and add the white background to that whilst giving the <p> enough line height to have the clearance.

Thanks for your help!

7

Set <p> to display:inline, you don’t need an extra <span> for it.

p {
  background:#fff;
  color: #000;
  display:inline;
  line-height:1.5;
}
8

Yes! i knew i’d done it before without any extra markup! Awesome stuff, thanks for that, it was starting to drive me a bit mad!

9

You won’t be able to put padding at the start and end of each line though as inline elements only place the padding at the beginning and then right at the end. We had this question a while back and if you need padding then it becomes very tricky and requires nested elements.

I couldn’t find the original thread but found this one which is similar but doesn’t have the separation between lines but has a good wrapping behaviour. Not much use for this question though :).

10

Thanks Paul!