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

別のWebサイトで見つかったコメントに基づいて、パディングをボックスシャドウに置き換えるだけでこれを解決しました。

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