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

Question

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

HTML：

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

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上进行操作吗？

alt text http://chris.carrotmedialtd.com/example.jpg

Answer 1

您可以使用以下方法达到预期效果：

• 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;
}

Answer 2

因为段落标记是块元素，所以背景将在行之间绘制。如果将其更改为内联元素，或将文本包装在内联元素中，则应该能够获得所需的效果。

<p><span>This is an example of what I have</span></p>

span {
   background: #fff;
}