CSS文本背景 - 颜色被切断

Question

首先，这是指导以及我想要实现的目标：

它不需要看起来100％相似，但每个EndOfLine应至少给出一个空格。好吧，当我尝试这样做时会发生这种情况：

如您所见，第一行的结尾以及第二行的开头没有边框空格。另一方面，第一行的开头和第二行的结尾确实有空格。

这是我的HTML-＆amp; CSS-标记。

<div class="headline-h2">
<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h2>
</div>


h2 {
background-color: #000000;
clear: left;
color: #FFFFFF;
display: inline;
float: left;
font-size: 14px;
font-weight: normal;
padding: 4px;
position: relative;
}

.headline-h2 {
float: left;
margin-bottom: 28px !important;
width: 100%;
}

我已经尝试了一些东西，但我不能为我的生活做这件事。 我还必须补充说，文本是可变的，因此如果客户需要，它可能会完全不同。 还需要说明的是，我们对于内联元素显然需要这个。我知道它适用于阻止。

Answer 1

为什么不将padding添加到h2：

h2 {
    background-color: #000000;
    clear: left;
    color: #FFFFFF;
    display: inline-block;
    float: left;
    font-size: 14px;
    font-weight: normal;
    position: relative;
    padding-left: 5px;
    padding-right: 5px; 
}