Question

我正在尝试为一些动态文本添加一个透明的png背景，并在句子周围给它15 px填充。

从照片中可以看出，span类不知道如何向没有换行符的文本添加填充。此文本是“视图幻灯片”的一部分，每隔几秒就会更改一次。我想在句子的左边，右边和后面添加填充。请参阅链接示例。我听说我可能需要使用php，因为它可以计算字符并添加填充。有谁知道这样做的方法。如果我给这个span类填充它只给填充到句子的前面和末尾但不在换行符之后。

http://visiongem.com/portfolio/span-class-help.jpg

html和CSS如下：

.blueback {background-image:url(images/transparentback.png);}



<div id="sliderhome"><div id="slidertitle"><span class="blueback">[title]</span>
</div><div id="featureslider-list"><ul class="homepage-featureslider-list">
<span class="blueback"><li>[field_linkto_story_url]</li>
<li>[field_linkto_photo_url]</li>
<li>[field_linkto_video_url]</li></div>
</ul></span></div>

Answer 1

将padding添加到文本中，然后将属性显示为table

.css{
    padding:10px;
    display:table;
}

Answer 2

问题在于，a是内联元素。我认为它应该是一个内联 - 块 -level-element，至少可以保证每个浏览器都能为边添加填充。

span {display：inline-block;填充：6px 8px; / *我倾向于定义水平和垂直单个值，因为它有助于谐波比例* /}

当我在safari中查看具有上述样式的标记时，它可以正常工作。我可以将显示类型更改为内联，它也可以，但两侧看起来有点不同。我认为每个浏览器都会有一些特殊的方式来解释这些属性。但可能有理由说明为什么人们无法满足您的需求。如果你用一个标记突出显示一个单词中的单个单词，那么正确完成后你就会从它的第一个字母到最后一个字母，而不是突出显示因为它们切割到周围单词边缘的空间。无论如何，文本标记将具有其自己的尖端大小，其所使用的文本对其没有影响 - 这可能会强制接受上下填充值。

我认为这是浏览器因其实现所依据的想法而有点不可预测的情况之一。

编辑：对不起！我来不及发帖。如上所述的表格设置也可以提供足够的帮助。

CSS文本背景跨度填充

2 个答案: