在不重叠背景颜色的情况下减少两个文本块之间的间隙

Question

不知道有没有人可以帮忙。我正在尝试获取 2 个副本块，它们将作为标题和简短描述放在一起。它们都设置了背景颜色，但是，当我尝试将下段部分移近（使用 line-height）到重叠的 <h2> 时。

.container {
  position: relative;
  width: 700px;
  height: 400px;
  background-color: #666;
}

.box {
  position: absolute;
  bottom: 0;
  color: rgba(255, 255, 255, 1.00);
  padding: 50px;
}

.box h2 {
  display: inline-block;
  font-size: 40px;
  margin: 0;
  padding: 15px 15px 0 15px;
  background-color: rgba(0, 47, 95, 1.00)
}

.box p {
  display: inline-block;
  font-size: 16px;
  padding: 15px;
  margin: 0;
  background-color: rgba(0, 47, 95, 1.00);
}

<div class="container">
  <div class="box">
    <h2>What do we do?</h2>
    <p>No where else will you find this range of activities. From flying and gliding, to shooting and rock climbing, there is something for everyone!</p>
  </div>
</div>

我想将 .box p 移动到更靠近 <h2> 的位置，但是一旦它越过 <h2> 区域的末端就继续使用额外的背景颜色。

这里显示了我希望达到的结果（间距夸大）：

也许取消定位和 z-index 的？我不确定。任何帮助将不胜感激。

谢谢！

Answer 1

如何减少 top/bottom 填充？

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

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

差距缩小，背景匹配。您还可以从这里更改 h2 的 line-height 以进一步修改间距。

Answer 2

将 CSS 的这一点添加到 h2:

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

Fiddle here

Answer 3

line-height 想法不错，但您还需要重置 vertical-align 以消除下面的间隙；

body {
 padding:0;
 margin:0;
}

.container {
 position:relative;
 width:700px;
 height:400px;
 background-color:#666;
 }

.box {
 position:absolute;
 bottom:0;
 color: rgba(255,255,255,1.00);
 padding:50px;
}

.box h2 {

  line-height:0.7em;
  vertical-align:top;
  
 display:inline-block;
 font-size:40px;
 margin:0;
 padding:25px 15px 0 15px;/* increase padding-top ? */
 background-color: rgba(0,47,95,1.00);
}

.box p {
 display:inline-block;
 font-size:16px;
 padding:15px;
 margin:0;
 background-color: rgba(0,47,95,1.00);
}

<div class="container">
 <div class="box">
  <h2>What do we do?</h2>
      <p>No where else will you find this range of activities. From flying and gliding, to shooting and rock climbing, there is something for everyone!</p>
 </div>

https://jsfiddle.net/8L9mn70x/2/

在不重叠背景颜色的情况下减少两个文本块之间的间隙

Decrease gap between two blocks of text without overlapping the background color

html

css

text

background-color

overlap