两个内联块和一个块元素之间的垂直空间 [英] 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).

推荐答案

其他答案提供了解决方案，但没有 为什么 发生这种情况:

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

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

在该字符串中，我标记了三个字符.这三者被称为" decenders "(例如:G下方的循环，Y和J下方的支腿).
声明 inline-block 时，它会同时获取 block 和 inline 元素的属性.内联元素通常是文本(例如例如 a 或 span )，因此具有下降符，因此您的div可以容纳下降符.

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.

这是 为什么 设置 line-height:0;font-size:0; 可以解决问题.

这篇关于两个内联块和一个块元素之间的垂直空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！