Как стилизовать строку тега p?

Question

[Renat871]

Привет. Подскажите пожалуйста как стилизовать тег p построчно.
Если я пишу тег p вот так:

<p class="text">
Привет, хабр!
Я Ренат
</p>

и даю ему
background-color: black;
то получается блок с задним фоном.

а мне надо окрасить задний фон и сделать снизу отступ.
И что б было много строк друг под другом

Answer 1

[Ankhena]

Вы можете:
1. Сделать фон градиентом с четкой границей
css.yoksel.ru/linear-gradients
2. Задать фон псевдоэлементу
3. Построчно так:

или даже так:

Comments

[Ankhena]

Или так https://jsfiddle.net/9nmpr0bs/

[Сергей delphinpro]

Ankhena, а если еще добавить

box-decoration-break: clone;
-webkit-box-decoration-break: clone;

то вообще норм будет.

[Ankhena]

Сергей delphinpro, ага, хотела и с ним, но решила угомониться.

[Renat871]

Сергей delphinpro, Ankhena, спасибо, отмечу двоих

[Renat871]

Сергей delphinpro, Ankhena, а как сделать по сторонам от строки больше паддинг

[Сергей delphinpro]

Renat871,

span {
  padding: 2px 10px;
}

Но нормально работать будет только с box-decoration-break (см выше)

[Сергей delphinpro]

https://jsfiddle.net/efn49vzq/

Answer 2

[ilqa_pro]

если пропишешь

background-color: black;

то цвет текста и заднего фона сольется, т.к. дэфолтный цвет текста черный

Можешь прописать backrgound: black; и color: white;

Чтобы сделать отступ снизу юзай padding-bottom

Чтобы переносить строки, можно использовать тэг br, но лучше оборачивать каждую строку в тэг span, которому прописывается display: block;

Comments

[Renat871]

про color я все понимаю. но я имею в виду именно перенос строки. я хочу что б было приблизительно вот так
просто быстенько накидал. не судите строго.
надо делать на каждую строку свой p или можно обойтись одним?