填充了一种直列文字的背景色文本缩进(Padding for background color of

我基本上是试图做这与包含文本缩进一个段落，但不能得到它，因为显示：内联不会允许文本缩进。有任何想法吗？

Answer 1:

使用伪元素

我已经创建了的jsfiddle例如使用span元件，其是inline ，然后添加before和after的伪元素添加额外的间隔的前方和在每个端部突出显示的文本的块。

如果你需要处理的是空间的大小调整font-size那些伪元素中，你应该是好去。

诀窍就是：

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

控制空间量

使用在适当的字符（或多个） :before和:after伪元件的一个可以实际控制添加间隔的量下降到个别像素。

最好的办法是用thin space这是在印刷方面的1/5或1/6，有时一个EM的。如果我们设置font-size这两个伪构件的至6个像素薄空间应始终近似为1米像素宽度而不管尺寸不符。

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

上样式定义将增加在每边的空间1个像素。如果我们把5个薄空间中的内容，我们会得到5像素空间...

或者使用一个狭窄的空间，并添加填充它，控制它的宽度这样。甚至取消任何内容，只是使用填充：

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

然而一个做它是可以控制的空间量下降到像素的粒度。

Answer 2:

没有BR标签：演示在这里： 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 */
}