背景色が重ならないように2つのテキストブロックの間隔を狭める

Question

誰かが助けることができるのだろうかと思います。私は、タイトルの役割を果たすコピーの2ブロックと、お互いに座っている短い記述を得ようとしています。彼らはどちらも背景色を設定していますが、下の段落部分を線の高さに近づけて、それが重なるようにしようとすると、<h2>が重なってしまいます。

は、ここで私が現時点で持っているものです。https://jsfiddle.net/8L9mn70x/

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

私は<h2>から.box p近いを移動したいが、それはの終わりを過ぎて行く後に追加の背景色を続行します<h2>エリア。

私はここに示されている達成したい結果（誇張された間隔）：

おそらくabosulteポジショニングとzインデックスの？よく分かりません。どんな助けもありがとう。

ありがとうございます！

Answer 1

line-heightアイデアは良いものですが、あなたが下にそのギャップを消去するvertical-alignをリセットするためにも必要です。

body { 
 
\t padding:0; 
 
\t margin:0; 
 
} 
 

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

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

 
.box h2 { 
 

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

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

<div class="container"> 
 
\t <div class="box"> 
 
\t \t <h2>What do we do?</h2> 
 
    \t \t <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> 
 
\t </div>

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

Answer 2

トップ/ボトムのパッドを減らすのはどうですか？

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

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

ギャップが減少し、背景が一致します。また、h2のline-heightをここから変更して、間隔をさらに変更することもできます。

Answer 3

H2にCSSのこのビットを追加します。

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

Fiddle here