Html 减少两个文本块之间的间距，而不重叠背景色

我想知道是否有人能帮忙。我试图得到2块副本，作为标题和简短的描述坐在对方下面。它们都设置了背景色，但是，当我尝试将较低的段落部分（具有行高）移近

时，它会重叠

以下是我目前的情况：

.container{
位置：相对位置；
宽度：700px；
高度：400px；
背景色：#666；
}
.盒子{
位置：绝对位置；
底部：0；
颜色：rgba（255、255、255、1.00）；
填充：50px；
}
.方框h2{
显示：内联块；
字体大小：40px；
保证金：0；
填充：15px 15px 0 15px；
背景色：rgba（0,47,95,1.00）
}
.方框p{
显示：内联块；
字体大小：16px；
填充：15px；
保证金：0；
背景色：rgba（0,47,95,1.00）；
}

我们该怎么办？
你在其他任何地方都找不到这一系列的活动。从飞行和滑翔，到射击和攀岩，每个人都有自己的东西

减少顶部/底部填充效果如何

.box h2 {
    padding:10px 15px 0 15px;
}

.box p {
    padding: 10px 15px;
}

---

间距减小，背景匹配。您还可以从此处更改

h2的
行高
，以进一步修改间距。
将此CSS位添加到h2：

line-height: 30px;
top: 5px;
position: relative;

线条高度
是一个好主意，但您还需要重置
垂直对齐
以消除下方的间隙


正文{
填充：0；
保证金：0；
}
.集装箱{
位置：相对位置；
宽度：700px；
高度：400px；
背景色：#666；
}
.盒子{
位置：绝对位置；
底部：0；
颜色：rgba（255255,1.00）；
填充：50px；
}
.方框h2{
线高：0.7em；
垂直对齐：顶部；
显示：内联块；
字体大小：40px；
保证金：0；
填充：25px 15px 0 15px；/*增加填充顶部*/
背景色：rgba（0,47,95,1.00）；
}
.方框p{
显示：内联块；
字体大小：16px；
填充：15px；
保证金：0；
背景色：rgba（0,47,95,1.00）；
}

我们该怎么办？
你在其他任何地方都找不到这一系列的活动。从飞行和滑翔，到射击和攀岩，每个人都有自己的东西

Hi您可能希望调整标题或段落的填充，而不是调整行高。请在
中将填充减少到
~10px
。框p
足够了