Фон под строчками: добавляем поля

Проблема: если задать фон строчным элементам, получается вот так:

Пробуем padding, отступы добавились только в начале и в конце строки

Аналогичная ситуация с border:

Прекрасное решение было найдено здесь: codepen.io/davatron5000/pen/HGjuv.

Суть состоит в добавлении тени. Тень добавляется к любому краю строки, даже если это не конец строки, а перенос.

  box-shadow: -20px 0 yellowgreen,
               20px 0 yellowgreen;

Тень не влияет на размер и положение элемента, поэтому дополнительно надо добавить padding родителю.

Результат:

Отличное решение и симпатичный эффект.

Ссылки по теме:
Box shadow
Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus