Gap between two blocks

Question

I have 2 page blocks each made of 3 spans. One span is containing 2 other spans. What I am trying to achieve is to get rid of the gap between these 2 blocks. Have a look at the example. The margins and paddings are set to zero.

.wrapper {
    display: inline-block;
 background-color: grey;
 padding: 25px;
 width: 50%;
}

.olive {
 display: block;
 height:50px;
 line-height: 50px;
 padding: 0px;
 margin: 0px;
 float: left;
 background-color: olive;
    
}

.blue {
 display: block;
 height:50px;
 line-height: 50px;
 width: 50px;
 padding: 0px;
 margin: 0px;
 float: right;
 background-color: #BCDBEA;
 text-align: center;
 border-radius: 50%;
    cursor: default;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="wrapper">
    <span class="olive">The box with some text</span>
    <span class="blue">?</span>
</span>
<span class="wrapper">
    <span class="olive">The box with some text</span>
    <span class="blue">?</span>
</span>
</body>
</html>

Why are you floating them if you want them to both be on the same side of the page? Remove the unnecessary float and your problem goes away. — TylerH, Dec 14 '17 at 17:16
Not really a duplicate IMHO. This one is about line height gap below the baseline, the other question seems about white space characters between tags... — miguel-svq, Dec 15 '17 at 08:08
That is right. The other question solves horizontal space. And that one solves vertical space. And solution is based on a vertical-align here, and font-size on other question — kilogram, Dec 16 '17 at 10:17

score 1 · Accepted Answer · answered Dec 14 '17 at 17:17

It's the "line descenders space", where the down part of p, g or j goes. Span in "inline" element, so it is placed "in the line" as if they where letters. The inline-block also is "inline", just change "where" it is placed on the line: Vertical align is "baseline" as default for inline elements, try vertical-align:bottom

You can also deal with line-heigth:0 (so there is no descenders space) or display:block and "float"

.wrapper {
    display: inline-block;
 background-color: grey;
 padding: 25px;
 width: 50%;
  vertical-align:bottom;
}

.olive {
 display: block;
 height:50px;
 line-height: 50px;
 padding: 0px;
 margin: 0px;
 float: left;
 background-color: olive;
    
}

.blue {
 display: block;
 height:50px;
 line-height: 50px;
 width: 50px;
 padding: 0px;
 margin: 0px;
 float: right;
 background-color: #BCDBEA;
 text-align: center;
 border-radius: 50%;
    cursor: default;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="wrapper">
    <span class="olive">The box with some text</span>
    <span class="blue">?</span>
</span>
<span class="wrapper">
    <span class="olive">The box with some text</span>
    <span class="blue">?</span>
</span>
</body>
</html>

score 0 · Answer 2 · answered Dec 14 '17 at 17:17

You are using display: inline-block, which preserves the whitespace/descenders between the blocks. Add an outer wrapper and set the font-size to 0, this negates the white space (you then have to reset the font size on wrapper),e.g.

.wrapper {
    display: inline-block;
 background-color: grey;
 padding: 25px;
 width: 50%;
  font-size: 1rem;
}

.olive {
 display: block;
 height:50px;
 line-height: 50px;
 padding: 0px;
 margin: 0px;
 float: left;
 background-color: olive;
    
}

.blue {
 display: block;
 height:50px;
 line-height: 50px;
 width: 50px;
 padding: 0px;
 margin: 0px;
 float: right;
 background-color: #BCDBEA;
 text-align: center;
 border-radius: 50%;
    cursor: default;
}

.outer-wrapper {
font-size: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="outer-wrapper">
<span class="wrapper">
    <span class="olive">The box with some text</span>
    <span class="blue">?</span>
</span>
<span class="wrapper">
    <span class="olive">The box with some text</span>
    <span class="blue">?</span>
</span>
</div>
</body>
</html>

Gap between two blocks

2 Answers2