在html中垂直减少标题和段落之间的空间

Question

我想减少标题和段落之间的垂直间距。

<td style="width:427px;">
  <h2 style="color:#156CA4">Quotation</h2>
  <p style="color:#00A651">abc Technologies Pvt Ltd</p>
</td>

Answer 1

尝试使用CSS调整行高属性。如果您只想让它特别影响这个p标签，我建议给它一个id

p {
    line-height: 0px;
}

还有可能出现负边距（这不是最佳做法，但会适用于您的情况）：

p {
    margin-top:-5px;
}

Answer 2

您必须从h2和p中删除边距。

h2{
  margin-bottom: 0px;
}
p{
  margin-top: 0px;
}

here是一个看到结果的小提琴手

Answer 3

简单使用以下css将删除默认的所有填充和边距。因为这里h2使用默认间距。

*{
  margin:0;
  padding:0;
}

上一个结果：

 <td style="width:427px;">
 <h2 style="color:#156CA4">Quotation</h2>
 <p style="color:#00A651">abc Technologies Pvt Ltd</p>
 </td>

新工作结果：

*{
  margin:0;
  padding:0;
}

 <td style="width:427px;">
 <h2 style="color:#156CA4">Quotation</h2>
 <p style="color:#00A651">abc Technologies Pvt Ltd</p>
 </td>

<强> Working Fiddle

Answer 4

在h2中使用margin-bottom样式

margin-bottom:-10px;

为了减少空间，我们应该使用负值。

Answer 5

在你的html下面添加这个样式，我觉得它很有用

<style>
    h2, p {
       margin: 0;
    }
</style>

Answer 6

使用 Adjacent sibling combinator

h2 + p {
    margin-top: 0;
}

这使得紧跟在 H2 标题之后的段落的上边距为 0。

您可能还需要更改标题的下边距。