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

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