两个内联块和块元素之间的垂直空间

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

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 2

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 ' (eg: 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 ( eg a or span ), thus have decenders, thus your div has room for decenders .

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

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> 

Answer 4

its because of line-height , also, your .rectangle was missing 1px in height(143->144)

NOTE: im not sure, if this is a cross-browser, so consider using float: left instead

 .rectangle { width: 420px; height: 144px; 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; } .wrapper{ line-height: 0; } 

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

Answer 5

使用font-size:0到父元素