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

发布时间：2020-12-14 19:41:17 所属栏目：资源来源：网络整理

导读：.rectangle { width: 420px; height: 143px; color: #fff; background: rgba(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 transparen

.rectangle {
    width: 420px;
    height: 143px;
    color: #fff;
    background: rgba(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.7);
    display: inline-block;
}

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

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

它从何而来？如何在没有负边距的情况下摆脱它(因为在某些屏幕上它们可能重叠).

解决方法

其他答案提供了解决方案,但不是出现这种情况的原因：

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

在那个字符串中我标记了三个字符.这三个人都被称为’decenders‘(例如：G下的环,Y和J下的腿).
当你声明一些内联块时,它会获得块和内联元素的属性.内联元素通常是文本(例如a或span),因此具有下伸,因此你的div有下拉的空间.

这就是设置line-height：0的原因;字体大小：0;诀窍.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!