Подсказка для тех, кто хочет сделать это с отступом строки, если вы добавите третий перенос, это возможно!
я есть дизайн, который я хочу реализовать, который включает в себя текст заголовка с собственным цветом фона, дополненный 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>
Таким образом, промежуток остается встроенным, завернутым в якорь абсолютного положения.