CSS：内联段清除/边距底部

Question

以下HTML由CMS呈现（我无法修改HTML，但我可以更改CSS）。

＆＃13;

＆＃13;

.teaser p {
  display: inline;
  clear: both;
  background-color: red; 
  margin-bottom: 20px;
}

＆＃13;

<div class="teaser">
<p>This is paragraph one</p>
<p>This is paragraph two...</p>
</div>

＆＃13;

＆＃13;

＆＃13;

我想要实现段落的每一行都有背景颜色 - 而不是整个段落作为一个框。像这样：

上面的图片用于以下帖子 - 他们在P-tag中添加了SPAN，我无法做到： CSS : Background-color on multi-line text?

是否有可能在每个段落后添加一个中断并使用纯CSS添加margin-bottom？

Answer 1

您应该可以通过将display属性设置为table值来实现此目的：

.teaser p {
    background-color: red;
    margin-bottom: 20px;
    display: table;
}

<div class="teaser">
    <p>This is paragraph one</p>
    <p>This is paragraph two...</p>
</div>

Answer 2

使用换行符作为内容：after？

.teaser {
  display: block;
  width: 4em;
}
.teaser p {
  display: inline;
  background-color: red;
  margin-bottom: 20px;
}
.teaser p:after {
  content: "\A\A";
  white-space:pre;
}

<div class="teaser">
  <p>This is paragraph one</p>
  <p>This is paragraph two...</p>
</div>

Answer 3

不确定我是否完全理解你的问题，但这应该可以解决问题：

.teaser p {
display: block;
clear: both;
background-color: red; 
margin-bottom: 20px;
}

当然，如果你想删除保证金，只需加上保证金：0

Answer 4

  

免责声明：这是使用的代码的修改版本   www.webdesignerdepot.com/（悬停博文标题）

您可以使用背景渐变实现类似的功能，但调整line-height会导致行之间出现间隙。它还依赖于inline元素，这意味着垂直边距不会起作用。因此<br>分隔p＆＃39;

编辑：你可以通过在p

中添加一些填充来解决线高问题

＆＃13;

＆＃13;

.teaser {
    width: 60%;
}

.teaser p {
  display: inline;
  color: #FFF;
  margin-bottom: 20px;
  line-height: 130%;
  padding: 3px;

  background-size: 202.22% auto;
  -webkit-background-size: 202.22% auto;
  -moz-background-size: 202.22% auto;
  background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, #000 50%);
  transition: background-position 0.5s ease-out;
  -webkit-transition: background-position 0.5s ease-out;
  background-position: -98.99% 0;
}

＆＃13;

<div class="teaser">
    <p>This is paragraph one This is paragraph one This is paragraph one This is paragraph one</p>
    <br><br>
    <p>This is paragraph one This is paragraph one This is paragraph one This is paragraph one</p>
</div>

＆＃13;

＆＃13;

＆＃13;