The gist is:

• wrap the text with a span
• use line-height for the spacing between lines ("margin")
• use box-shadow to control the line background size ("padding")

Example

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

• We build reliable cloud solutions with Infrastructure as code
• We are experts in security, Linux and databases
• We support your dev team to perform

Read more Show archive.org snapshot

span
  box-shadow: 0 0 0 10px #fff
  background-color: #fff
  box-decoration-break: clone # Fix Firefox
  line-height: 2.2

→ jsfiddle Show archive.org snapshot

The fourth number of box-shadow indicates spread, which can be imagined as the shadow growth when moving the light source closer towards the object. The shadow in my example creates a visual padding of 10px.

Custom Padding

You can combine multiple shadows, moving each where you need the padding. Example with 7px extra padding left and right:

box-shadow: -7px 0 0 10px #fff, 7px 0 0 10px #fff

Note that this does only work with opaque colors.

Thanks to Geoff Muskett for the inspiration.