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

Question

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

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

Answer 1

根据在另一个网站上找到的评论，我通过简单地用 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;
}

Answer 2

这将使你的工作完成——

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