CODEWITHSUNDEEP
csstexthighlighting
psot
psot

Reputation: 194

Highlight text - how to have consistent padding?

I can't get this paragraph to display as I want to. The padding between the text and the end of the background should be consistent on every line as shown in this image

Picture of Padding Problem

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

Upvotes: 1

Views: 2311

Answers (2)

psot
psot

Reputation: 194

I solved this by simply replacing the padding with box-shadow, based on comments found on another website.

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

Upvotes: 1

Praveen Dabral
Praveen Dabral

Reputation: 2509

This will make your work done--

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

Upvotes: 0

Related Questions