kulan kulan - 4 months ago 16
HTML Question

Vertical space between two inline-block and a block element



.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

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

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 the block and inline elements. The inline elements are often text, thus have decenders, thus your div has room for decenders.

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