CSS: Giving text lines a background-color (with configurable line padding and margin)

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

Copyspan
  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:

Copybox-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.