突出显示文本 - 如何保持一致的填充？答案

【问题标题】：Highlight text - how to have consistent padding?突出显示文本 - 如何保持一致的填充？
【发布时间】：2013-03-14 04:25:48
【问题描述】：

我无法按我的意愿显示此段落。文本和背景末尾之间的填充应在每一行上保持一致，如图所示

HTML

<div id="title-image-container">
    <?php echo '<img src="'.get_post_meta($id, 'title-image', true).'">' ?> 
    <div class="highlight-title"><p><?php the_title(); ?></p></div>
</div>

CSS

#title-image-container {
    float: left;
}
.highlight-title {
    position: relative;
    top: -300px;
    padding: 5px 5px 5px 10px;
}
.highlight-title p {
    background-color: red;
    display: inline; 
    color: #000;    
    font: 1.9em 'oswald';
    line-height: 60px;
    padding: 0 10px;
}
#content img {
    height: auto;
    margin: 0;
    max-width: 100%;
}

【问题讨论】：

尝试移除内边距并设置文本边距。
谢谢，但它只在第一行引入了左边距而不是左边距。
@psot：从问题中删除解决方案，并使用该解决方案创建答案。然后接受您自己的答案以结束问题。

标签： css text highlighting

【解决方案1】：

这将使您的工作完成--

p{padding-left:5px;
padding-right:5px;
text-align:justify;
word-spacing:5px;}

【讨论】：

谢谢，我会尝试更新。由于 IE8 不支持 box-shadow，这将是一个更好的解决方案。

【解决方案2】：

我通过在另一个 website 上找到的 cmets 简单地将填充替换为 box-shadow 解决了这个问题。

.highlight-title p {
    box-shadow: 10px 0 0 0 red, -10px 0 0 0 red;
    background-color: red;
    display: inline; 
    color: #000;    
    font: 1.9em 'oswald';
    line-height: 60px;
}

【讨论】：