CSS：内联段落清除/底边空白

Question

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

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

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

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

上面的图像用于以下帖子-他们在P标签中添加了SPAN，但我不能这样做： CSS：多行文本的背景色？

是否有可能在每个段落之后添加一个分隔符并使用纯CSS在底部添加空白？

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 ：

编辑：您可以通过在p添加一些填充来解决行高问题

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

 <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>