Aplicar padding en inline

[maximilianojcelis]

Buenas, tengo un problema que no le encuentro solución.
Tengo un texto en bloque inline, que tiene varios renglones, al que no puedo aplicarle padding.
Una imagen vale mas que mil palabras asi me entienden.

Quiero lograr esto:


Pero me sale esto:


El código que tengo:

Código CSS:

#wrapper {
    width: 200px;
}
 
h1 {
    background: red;
    display: inline;
    padding: 10px;
    font-size: 20px;
    line-height: 50px;
}
 

Entiendo que me lo toma como una sola línea, por eso me aplica el padding solo en el comienzo y en el final. No logro comprender como poder hacer para que en cada supuesto salto de línea me aplique el padding. Alguna sugerencia?

[C2am]

Hola
Fijate en como lo hacen los de clarin.com por ejemplo.
No solo usan el <h1> sino que también le agregan un span, y en la combinación de css a estos dos elementos logran lo que estás buscando.
A tener en cuenta:
backgrounds y box-shadow.

Código CSS:

background: url('../images/titulo-nota-img-bg.png') repeat;
    background: rgba(255,255,255,.8);
    box-shadow: -10px 0 0 rgba(255,255,255,.8);
    -ms-box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
}
h2 {
    font-size: 28px;
    font-weight: bold;
    display: inline;
    line-height: 39px;}
 
 span {
    box-shadow: 10px 0 0 rgba(255,255,255,.8);
    -ms-box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
}
 

Usa las herramientas de desarrollo del navegador para que puedas ver que sucede al desactivar cada propiedad y te darás cuenta que necesitas.

En lo personal no me gusta nada ese diseño, pero bue, para gustos...


Edito:
Probando un poco, que puedes obtener lo mismo con solo aplicar box-shadow al h1, pero dando sombra hacia ambos lados:

Código CSS:

h1 {
    background: red;
    display: inline;
    font-size: 20px;
    line-height: 30px;
    box-shadow: -10px 0 0 red,  10px 0 0 red;
}
 

Y algo más para tener en cuenta:
Box-decoration-break : Un poco de teoría en http://ksesocss.blogspot.com/2012/04...ss3-en-la.html
Saludos