如何仅将CSS样式应用于块级元素的文本内容？

我希望实现此演示：

红色背景的标题是H1元素。目前，我使用以下HTML代码实现此演示：

<h1><em>Some title</em></h1>

<h1>Some title</h1>

一些标题

因此，我将标题包装在EM元素（内联元素）中，然后设置该元素的样式

现场演示：

这是可行的，但如果我不被迫使用这样的代理元素来设计我的H1标题，我会更高兴。因此，我希望有以下HTML代码：

<h1><em>Some title</em></h1>

<h1>Some title</h1>

一些标题

上述演示应该仅通过CSS来实现。那能做到吗

重要提示：标题文本的左右两侧必须有一个3倍的填充，并且此空间必须填充所需的背景色（本例中为红色）

此外，该解决方案不需要在IE8或其他向后浏览器中工作。我很好，如果它在最新的Firefox、Chrome、Safari

---

免责声明：正如经常发生的那样，我在写问题时找到了问题的解决方案（我有点像黑客）。但我仍在发布这篇文章——我想看看你的想法……：）

这个怎么样：

---

i、 e：只需将

h1

作为

显示：内联块
可能使用
浮动
和
字体样式
？（编辑：忘了删除
em
）@JaredFarrish啊，当然是的。我想
em
应该是
italic
内容，这就是为什么我把它放在那里（不确定为什么）。但是是的，做一个
float
然后
clear
ing
p
元素可以工作，但是
display:inline block
也可以工作。“我想这取决于你的本领。”贾雷德法里什说，我用它们是因为它比结实的短。我需要一个代理元素…哦，对了，
em
是
斜体的标记。我在想我是不是疯了。啊，多简单啊*facepalm*Lol，没有。我用了
：：第一行
，和
：：在
之后，还有一个左边框和
行高
。。。这真是一团糟，看这里：我在这里做了一个测试——它可以跨浏览器工作。