CSS Brain teaser

Réponse au problème posé par @hteumeuleu Inspiré par les différentes propositions des lecteurs

HTML

<!doctype html>
<html>
    <head>
        <title>CSS Brain Teaser</title>
        <!-- 
            Un exercice rigolo proposé par HTeuMeuLeu
            http://www.hteumeuleu.fr        
        -->
    </head>
    <body>
        <h1>
            <span class="wrap">
                <span class="inner">Du texte HTML dynamique sur plusieurs lignes avec un fond qui suit bien et des marges autour.</span>
            </span>
        </h1>
    </body>
</html>

CSS

body { padding:50px; background:#2fa7ca; }
h1 { width:auto; font:bold 36px sans-serif; letter-spacing:-1px; color:#000; position:relative; padding:10px 20px; overflow:hidden;}

.wrap {outline:10px solid white; border:1px solid white; outline-offset:-1px;}
.inner {background:white; position:relative;}

JavaScript

/* En partant des différentes propositions utilisant outline :
On sépare en deux SPAN afin d'éviter que le texte ne soit coupé en haut et en bas de chaque ligne (à cause de outline)
On corrige le bug des espaces (FF, Chrome) avec un outline-offset:-1px; et une bordure 

EN :
We use two `span`s to prevent text from being cut (on bottom of "p" for example)
We get rid of a spacing bug (Firefox & Chrome) with `outline-offset:-1px` and `border:1px solid white`
*/