Padding for background color of an inline text WIT

Question

I am basically trying to do THIS with a paragraph that contains text-indent, but can't get it because the display:inline won't allow text-indent. Any ideas?

Answer 1

Without br tag : demo here : http://jsfiddle.net/korigan/jzm3qu1q/1/

HTML

 <div class="wrap">
     <p class="highlight">
        <span class="text">Amet assumenda atque eos excepturi harum ipsa</span>
     </p>
 </div>

CSS

.wrap {
    width: 150px;
}
.highlight {
    color: #fff;
    display: inline;
    background: blue;
    font-size: 25px;
    font-weight: normal;
    line-height: 1.2;
}
.highlight .text {
        padding: 4px;
        box-shadow: 4px 0 0 blue, -4px 0 0 blue;
        background-color: blue;
        box-decoration-break: clone; /* For Firefox */
}

Answer 2

Using pseudo elements

I've created a JSFiddle example that uses span elements which are inline and then adds before and after pseudo elements to add additional spacing in front and at the end of each highlighted block of text.

In case you need to manipulate amount of that space adjust font-size within those pseudo elements and you should be good to go.

The trick is just:

.highlight {
    font-family: Helvetica, Sans-serif;
    font-size: 48pt;
    font-weight: bold;
    text-transform: uppercase;
}
    .highlight:before,
    .highlight:after {
        /* no-breaking-space (nbsp) entity */
        content: "\00a0";
    }

Controlling space amount

Using appropriate character(s) in :before and :after pseudo elements one can actually control amount of added spacing down to individual pixels.

The best way is to use thin space which is in typographical terms 1/5 or sometimes 1/6 of an em. If we set font-size of these two pseudo elements to 6 pixels thin space should always approximate to 1 pixel width regardless of dimension discrepancies.

.highlight:before,
.highlight:after {
    content: "\2009";
    font-size: 6px;
}

Upper style definition will add 1 pixel of space on each side. If we put 5 thin spaces in content, we'd get 5 pixel space...

Or use one thin space and add padding to it and control its width this way. Or even abolish any content and just use padding:

.highlight:before,
.highlight:after {
    content: "";
    padding: 0 5px; /* will give 10px space */
}

However one does it it's possible to control amount of space down to pixel granularity.