为文本添加背景颜色，但段落行之间留有空格

我想知道 CSS 是否可以做一些事情。基本上我想使用 html/css 在图像的 RHS 上重新创建文本，但目前我正在获取图像的 LHS。

HTML：

<div id="banner">
    <div id="text">
        <p>This is an example of what I have</p>
    </div>
</div>

The CSS:

div#banner { background: green; width:300px; height:300px;}
div#text {  margin: 20px auto; }
div#text p {  background:#fff; padding: 5px; margin: 5px; font-size: 2em; }

现在我意识到这可以通过以下方式完成：

1. 使用图像
2. 使用单独的 p 标签

（第 2 点我的意思是：

<div id="banner">
    <div id="text">
        <p>This is an</p>
        <p>example of</p>
        <p>what I have</p>
    </div>
</div>

)

但我真正想知道的是，是否真的可以仅使用 css 和单个 p 标签来执行图像 RHS 上的操作？

替代文本 http://chris.carrotmedialtd.com/example.jpg http://chris.carrotmedialtd.com/example.jpg

您可以通过使用以下方法来达到您想要的效果：

• display: inline;强制 p 上的背景样式应用于文本，而不是 p 上的块，以及
• line-height: 2.2em（略大于字体大小）在文本之间强制添加线条

像这样：

div#text p {
    display: inline;
    background: #fff;
    padding: 5px;
    margin: 5px;
    font-size: 2em;
    line-height: 2.2em;
}