En este bloc por ejemplo se usa un efecto en los títulos de la home que es que a los textos darles un efecto de subrayado. Pues ahora veremos cómo hacerlo para que quede perfecto con sus paddings laterales y todo.

Primero tenemos nuestro texto:

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>

Si pusieramos un <span> a todo el contenido del <h1> tendríamos un bloque tal que así:

<h1><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></h1>

h1 span{ background-color: #FFB400; }

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Vemos que los inicios, los saltos de línea y los finales quedan con poco padding. Podríamos añadir un padding pero nos lo añadiría al inicio y al final y no en los saltos de línea. Lo que tendríamos que hacer es poner spans en todas la palabras y luego dar padding para simular el espacio:

<h1>
   <span>Lorem</span>
   <span>ipsum</span>
   <span>dolor</span>
   <span>sit</span>
   <span>amet,</span>
   <span>consectetur</span>
   <span>adipiscing</span>
   <span>elit</span>
</h1>

h1 span{
    background-color: #FFB400;
    display: inline-block;
    padding: .15em .2em;
    line-height: 1em;
}

Loremipsumdolorsitamet,consecteturadipiscingelit

Quizá la diferencia puede parecer poca pero son los detalles al final los que hacen que un desarrollo sea de calidad.

A todo esto diréis: ¡Qué palo poner <span> a todas la palabras!, ¿no?. ¡Pues sí! Por eso es mejor utilizar una función php que reemplaza los espacios por palabras:

function get_replace_space($class=false,$string){
    if($class) $class = ' class="'.$class.'"'; else $class = '';
    $new_string  = '<span'.$class.'>';
    $new_string .= str_replace(' ','</span><span'.$class.'>',$string);
    $new_string .= '</span>';
    return $new_string;
}
function the_replace_space($class,$string){
    echo get_replace_space($class,$string);
}

Personalmente me gusta usar dos funciones una que empieza por get_ y otra que empieza por the_. La get_ hace un return y la the_ hace un echo. También se le puede pasar una clase para poder hacer diferentes colores, tamaños, paddings… Al final nuestro <h1> quedará así:

<h1><?php the_replace_space('amarillo','Lorem ipsum dolor sit amet, consectetur adipiscing elit'); ?></h1>

Y saldría esto:

<h1>
   <span class="amarillo">Lorem</span>
   <span class="amarillo">ipsum</span>
   <span class="amarillo">dolor</span>
   <span class="amarillo">sit</span>
   <span class="amarillo">amet,</span>
   <span class="amarillo">consectetur</span>
   <span class="amarillo">adipiscing</span>
   <span class="amarillo">elit</span>
</h1>