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

下面的HTML由CMS呈现（我不能修改HTML，但我可以更改CSS）

.trister p{
显示：内联；
明确：两者皆有；
背景色：红色；
边缘底部：20px；
}

这是第一段

这是第二段

您应该能够通过将

显示

属性设置为

表格

值来实现这一点：

.trister p{
背景色：红色；
边缘底部：20px；
显示：表格；
}

这是第一段

这是第二段

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

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

---

当然，如果要删除边距，只需添加边距：0，使用换行符作为：after的内容即可

.trister{
显示：块；
宽度：4em；
}
.挑逗者{
显示：内联；
背景色：红色；
边缘底部：20px；
}
.挑逗者p：之后{
内容：“\A\A”；
空白：预处理；
}

这是第一段

这是第二段

免责声明：这是在上使用的代码的修改版本 （将博客文章标题悬停）

您可以通过背景渐变实现类似的效果，但调整

行高度将导致行之间出现间隙。它还依赖于内联的
元素，这意味着垂直边距不起作用。因此，

将
p
分开：

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


.trister{
宽度：60%；
}
.挑逗者{
显示：内联；
颜色：#FFF；
边缘底部：20px；
线高：130%；
填充：3倍；
背景尺寸：202.22%自动；
-webkit背景尺寸：202.22%自动；
-moz背景尺寸：202.22%自动；
背景图像：线性梯度（向右，rgba（255255,0）50%，#000 50%）；
过渡：背景位置0.5s放松；
-webkit过渡：背景位置0.5s放松；
背景位置：-98.99%0；
}

这是第一段这是第一段这是第一段这是第一段




这是第一段这是第一段这是第一段这是第一段

背景应占据文本宽度所需的空间，而不是100%。检查问题中的图像。“显示：内联块；”显示整个块的背景色，而不是如屏幕截图所示的直线。再次编辑。没有页边距底部，但您可以使用换行计数和字体大小。“显示：表格”将段落的背景颜色显示为块而不是行。在您的示例中，“

”会显示页边距底部，但我无法添加其他html：-（是的，很抱歉。我后来意识到。我一直在试图找到一种方法，在没有br的情况下实现这一点，但我正在努力。我需要“显示：内联”；因为我不想在整个段落后面，但在每行后面都有背景色。请参见屏幕截图。