JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body { padding:50px; background:#2fa7ca; }

/*Solution sans span*/
h1 { 
    display: inline;
    font:bold 36px sans-serif; 
    letter-spacing:-1px; 
    color:#000;
    line-height:54px;
    
    background:white;
    /*box-shadow:0px 0px 0 10px white;*/
}

/*Solution avec span*/
h1:last-child {
    display: block;
    margin:50px 0;
    width:450px;
    background:transparent;
    box-shadow:none;
} 
h1:last-child span{
    background:white;
    box-shadow:0px 0px 0 10px white;
}