span problemas de color de fondo y relleno
Tengo un diseño que quiero implementar que implica que el texto del título aparezca con su propio color de fondo, rellenado con 10 píxeles, sobre una imagen, por ejemplo:
http: //i.stack.imgur.com/E7EpS.pn
El primer ejemplo en esta imagen funciona bien y es simple:
.greenbox {width:520px; height:261px; position:relative;}
.greenbox span { padding:0 10px; background:#000; position:absolute; left:0; bottom:40px; }
Trouble surge cuando el texto se desborda en otra línea, luego el relleno de elementos de extensión no afecta el texto en los saltos de línea, se representa así:
http: //i.stack.imgur.com/pY18f.pn
¿Alguien sabe de una alternativa, o cómo establecerían este diseño para que el color de fondo y el relleno fueran consistentes?
Gracias por adelantad
Edit: había simplificado el código para hacerlo conciso, pero me había perdido una parte vital. En realidad es así:
.greenbox {width:520px; height:261px; position:relative;}
.greenbox a {position:absolute; left:0; bottom:40px; }
.greenbox span { padding:0 10px; background:#000; }
Con el html como:
<div class="greenbox">
<a href="link"><span>The Title Goes Here</span></a>
</div>
e este modo, el tramo permanece en línea, envuelto en un ancla de posición absoluta.