減少兩個文本塊之間的空白而不會重疊背景顏色

我想知道是否有人可以提供幫助。我試圖得到兩個副本，將作爲一個標題和一個簡短的描述坐在對方下。他們都有背景顏色設置給他們，但是，當我嘗試移動較低的段落更接近（與行高）到<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>

我想移動.box p接近<h2>，而是繼續與更多的背景顏色，一旦它進入過去的結束<h2>地區。

我希望實現此處顯示的結果（間距誇張）：

也許abosulte定位的z-index的？我不確定。任何幫助，將不勝感激。

謝謝！

來源

2017-04-12 NickL

嗨，你將要調整的標題和或段落不調整行高填充。 – Adrianopolis

在'.box p'中將填充減少到'〜10px'足夠 – soorapadman

的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/

來源

2017-04-12 20:41:42

非常好，謝謝你，像一個魅力！ – NickL

如何減少頂部/底部填充？

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

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

差距縮小，背景匹配。您也可以從這裏更改的line-height以進一步修改間距。

來源

2017-04-12 20:28:33 StefanBob

CSS的該位添加到H2：

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

Fiddle here

來源

2017-04-12 20:30:09 sn3ll

減少兩個文本塊之間的空白而不會重疊背景顏色

回答

相關問題