Question

我有一个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;
}

在这个“Lorem”和“consectetur”之前以及“amet”和“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;
}

DEMO

您可以在本文css-tricks

中找到更多信息

Answer 2

这是一个棘手的问题，多年来一直困扰着开发人员。您可以尝试一些技巧，这些在$sum文章中有描述。

我发现对我自己特别有用的是使用box-shadow来模拟填充。在你的情况下，你可以尝试这样的事情：

.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属性CSS-tricks之前，将需要这些黑客攻击。在撰写本文时，它仅适用于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;

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

4 个答案: