如何在示例中创建h1？

Question

我想在下面创建h1标题作为示例。我在某个网站上看到过这种类型的标题，我现在还记不起它的地址了。如果我记得，我会从他们的网站上复制它。不幸的是我忘记了。这是PSD屏幕截图：

无论如何，无论我尝试过什么，我仍然无法得到结果。我得到的是：

这是我的代码：

div.big-header div.header-left h1 {
    float: left;
    color: #fff;
    background: #c00000;
    font: bold 35px "Open Sans";
    padding: 1px 5px;
    margin-bottom: 35px;
}

这里是JSFiddle

问题：如何创建标题作为上面的示例（第一张图片）

Answer 1

请尝试以下操作： Demo

已更新 Demo

更新：添加了display：inline，line-height with box-decoration-break以及您的代码..

CSS：

h1 {
    color: #fff;
    background: #c00000;
    font: bold 35px sans-serif;
    padding: 1px 5px;
    margin-bottom: 35px;
    /* newly added code */
    display:inline;
    line-height:44px;
   -webkit-box-decoration-break: clone;
    -ms-box-decoration-break: clone;
    -o-box-decoration-break: clone;
     box-decoration-break: clone;
}

Answer 2

在span：

中使用h1

h1 {
    float: left;
    color: #fff;
    font: bold 35px sans-serif;
    padding: 1px 5px;
    margin-bottom: 35px;
}

h1 > span {
    background: #c00000;
}

和

<h1><span>How to create a page with PHP?</span></h1>