Я не могу опустить текст с фоном, не заполняя лишние рамки. ⇐ Html

[Anonymous]

Я пытаюсь заполнить фон текстом нужного размера и поставить 'span' в нужное место, но у меня не получается, так как либо блок полностью заполнен, либо я могу Не перемещайте, скрины прилагаются. Вот что получается:

Увы, это единственный способ сделать это:


Или так:


Или так, но тогда вы не сможете его переместить:


То есть фон либо заполнен правильно, но его нельзя переместить на в нужном месте, или заполнено неправильно, но оно в нужном месте.
Использование полей не помогает.

Код: Выделить всё

.first .price {
display: block;
padding-left: 14px;
padding-right: 14px;
padding-top: 30px;
padding-bottom: 30px;
border-radius: 10px;
border: 1px groove #C175FF;
background-color: #1D0E2D;
color: white;
}

.first .purp {
color: #C175FF;
}

Код: Выделить всё

[url=#]
[img]CSS/img/pets simulator.png[/img]

LOLKEK

9999.99
₽

[/url]

Подробнее здесь: https://stackoverflow.com/questions/793 ... ra-borders