я есть дизайн, который я хочу реализовать, который включает в себя текст заголовка с собственным цветом фона, дополненный 10px, поверх изображения, например:

http://i.stack.imgur.com/E7EpS.png

Первый пример на этом рисунке хорошо работает и прост:

.greenbox {width:520px; height:261px; position:relative;}
.greenbox span { padding:0 10px; background:#000; position:absolute; left:0; bottom:40px; }

Проблема возникает, когда текст перетекает на другую строку, тогда заполнение элементов span не влияет на текст на разрывах строки, оно выглядит так:

http://i.stack.imgur.com/pY18f.png

Кто-нибудь знает альтернативу, или как они разработали бы этот дизайн, чтобы цвет фона и отступы были согласованы?

заранее спасибо

Изменить: я упростил код, чтобы сделать его кратким, но пропустил важную часть. На самом деле это так:

.greenbox {width:520px; height:261px; position:relative;}
.greenbox a {position:absolute; left:0; bottom:40px; }
.greenbox span { padding:0 10px; background:#000; }

С HTML, как:

<div class="greenbox">

    <a href="link"><span>The Title Goes Here</span></a>

</div>

Таким образом, промежуток остается встроенным, завернутым в якорь абсолютного положения.