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

Question

I wonder if anyone can help. I'm trying to get 2 blocks of copy which will be acting as a title and a short description to sit under each other. They both have background colours set to them, however, when I try to move the lower paragraph section closer (with line-height) to the <h2> it overlaps.

Here's what I have at the 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>

I want to move .box p closer to the <h2>, but continue with the additional background colour once it goes past the end of the <h2> area.

The result I wish to achieve is shown here (spacing exaggerated):

Perhaps abosulte positioning and z-index's? I'm not sure. Any help would be appreciated.

Thanks!

Hi you would want to adjust the padding on the title and or the paragraph not adjust line-height. — Adrianopolis, Apr 12 '17 at 20:26

score 1 · Accepted Answer · answered Apr 12 '17 at 20:41

the line-height idea is the good one but you need also to reset vertical-align to erase that gap underneath;

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/

score 0 · Answer 2 · answered Apr 12 '17 at 20:28

0

How about reducing the top/bottom padding?

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

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

Gap is reduced, backgrounds match up. You can also change the line-height of the h2 from here to further modify the spacing.

answered Apr 12 '17 at 20:28

StefanBob

4,857
2
32
38

score 0 · Answer 3 · answered Apr 12 '17 at 20:30

0

Add this bit of CSS to the h2:

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

Fiddle here

answered Apr 12 '17 at 20:30

sn3ll

1,629
1
10
16

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

3 Answers3