在内联元素的每一行上填充

Question

i具有H3元素宽度的背景颜色，该背景颜色在两行上破裂。我希望它之间的线之间有一些空间，因此我通过将元素显示为内联并给它比字体大小更高的线路高。现在，我想知道是否有任何方法可以在第一个行之前和每行的最后一个单词之前获得一些填充？

<div class="wrapper">
<h3>Lorem ipsum dolor sit amet consectetur adipiscing elit<h3>
</div>
.wrapper{
   width: 500px;
}
h3{
  font-size: 40px;
  background: #000;
  color: #fff;
  line-height: 54px;
  display: inline;
}

在这个编码epen中，将在" lorem"one_answers" Consectetur"one_answers" Amet"one_answers" Elit"之后

http://codepen.io/anon/pen/rvxybl

Answer 1

您可以通过添加box-shadow：

来实现它

h3 {
  font-size: 40px;
  background: #000;
  color: #fff;
  line-height: 54px;
  display: inline;
  box-shadow: 10px 0 0 #000, -10px 0 0 #000;
}

演示

您可以在本文中找到更多信息CSS-Tricks

Answer 2

这是棘手的问题，多年来一直是麻烦开发人员。您可以尝试一些技巧，在此CSS-tricks文章中进行了描述。

我发现对自己特别有用的是使用盒子阴影模仿填充物。在您的情况下，您可以尝试这样的事情：

.wrapper {
  width: 500px;
  padding: 0 10px;
}
h3 {
  font-size: 40px;
  background: #000;
  color: #fff;
  line-height: 54px;
  display: inline;
  box-shadow: 10px 0 0 #000, -10px 0 0 #000;
}

<div class="wrapper">
    <h3>Lorem ipsum dolor sit amet consectetur adipiscing elit</h3>
</div>

将需要这些黑客攻击，直到CSS属性box-decoration-break: clone得到广泛支持为止。在撰写本文时，它将仅在Firefox和Webkit浏览器中使用：

h3 {
  font-size: 40px;
  background: #000;
  color: #fff;
  line-height: 54px;
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

Answer 3

添加另一个Div。

<div class="wrapper">
  <div>
      <h3>Lorem ipsum dolor sit amet consectetur adipiscing elit<h3>
  </div>
</div>
<style>
.wrapper{
  width: 500px;
  padding-left: 10px;
  padding-right: 10px;
}
</style>

Answer 4

h3{
padding-left:10px;
padding-right: 10px;
}

---

或您也可以使用padding: 0px 10px 0px 10px;