Vertical space between two inline-block and a block element

Question

.rectangle {
    width: 420px;
    height: 143px;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    padding: 20px 0px 20px 10px;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.triangle {
    width: 0;
    height: 0;
    border-top: 92px solid transparent;
    border-bottom: 92px solid transparent;
    border-left:45px solid rgba(0, 0, 0, 0.7);
    display: inline-block;
}

.block {
  width: 200px;
  height: 80px;
  background: red;
}

<div class="rectangle"></div><!--
--><div class="triangle"></div>
<div class="block"></div>

Where does it come from? How to get rid of it without negative margins (because on some screens they may overlap).

Answer 1

The other answers provide solutions, but not the why this happens:

Some given funny joke
-----^---------^-^

In that string I've marked three characters. Those three have so called 'decenders' (e.g.: the loop under the G, the legs under the Y and J).
When you declare something inline-block, it gets the properties of both block and inline elements. The inline elements are often text (e.g. a or span), thus have decenders, thus your div has room for decenders.

This is why setting line-height:0; font-size:0; does the trick.

Answer 2

there is a many solution for this

Solution 0: No Space Between Elements

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

Solution 1: font-size: 0 on Parent

.inline-block-list { /* ul or ol with this class */
    font-size: 0;
}

.inline-block-list li {
    font-size: 14px; /* put the font-size back */
}

Solution 2: HTML Comments

<ul>
    <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

Solution 3: Negative Margin

.inline-block-list li {
    margin-left: -4px;
}

Solution 4: Dropping Closing Angle

<ul>
    <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>

more about this

Answer 3

You can use CSS pseudo element :after in this case.

Check below example:

.rectangle {
  width: 420px;
  height: 143px;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  padding: 20px 0px 20px 10px;
  position: relative;
  vertical-align: top;
}
.rectangle:after {
  top: 0;
  left: 100%;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 92px solid transparent;
  border-bottom: 92px solid transparent;
  border-left: 45px solid rgba(0, 0, 0, 0.7);
}
.block {
  width: 200px;
  height: 80px;
  background: red;
}

<div class="rectangle"></div>
<div class="block"></div>