Diminuer l'espace entre deux blocs de texte sans chevaucher la couleur de fond

Je me demande si quelqu'un peut aider. J'essaye d'obtenir 2 blocs de copie qui agira comme un titre et une brève description pour s'asseoir sous l'autre. Ils ont tous les deux des couleurs d'arrière-plan, cependant, lorsque j'essaie de rapprocher la section de paragraphe inférieure (avec la hauteur de ligne) du <h2>, il se chevauche.Diminuer l'espace entre deux blocs de texte sans chevaucher la couleur de fond

Voici ce que j'ai en ce moment: 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>

Je veux passer .box p plus près du <h2>, mais continuer avec la couleur d'arrière-plan supplémentaire une fois qu'il passe devant la fin de la zone <h2>.

Le résultat que je souhaite réaliser est montré ici (espacement exagéré):

Peut-être abosulte positionnement et z-index de? Je ne suis pas sûr. Toute aide serait appréciée.

Merci!

Source

2017-04-12 NickL

Salut vous voulez régler le rembourrage sur le titre et régler ou le paragraphe sans hauteur de la ligne. – Adrianopolis

Réduire le remplissage à '~ 10px' dans' .box p' que suffisant – soorapadman

l'idée line-height est la bonne, mais vous devez également réinitialiser vertical-align pour effacer cette lacune en dessous;

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/

Source

2017-04-12 20:41:42

Excellent, merci, fonctionne comme un charme! – NickL

Que diriez-vous de réduire le rembourrage haut/bas?

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

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

L'espace est réduit, les arrière-plans correspondent. Vous pouvez également modifier le line-height du h2 à partir d'ici pour modifier davantage l'espacement.

Source

2017-04-12 20:28:33 StefanBob

Ajouter ce morceau de CSS à la h2:

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

Fiddle here

Source

2017-04-12 20:30:09 sn3ll

Diminuer l'espace entre deux blocs de texte sans chevaucher la couleur de fond

Répondre

Questions connexes