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

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 上的 block ，以及
• line-height: 2.2em(略大于您的字体大小)以强制文本之间的线条

像这样:

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