Html 为什么跨度的上边框比下边框小？

我想在一条直线上画三个三角形，第一个和第三个三角形指向上，中间一个三角形指向下。现在，第一个和第三个（较低的三角形）是好的，我有麻烦的中间一个

为什么上三角的尺寸这么小

否则我怎么能有这样的安排呢

.lower{
边框宽度：50px；
边框颜色：黑红绿蓝；
边框样式：实心；
}
.上{
边框宽度：50px 50px 0 50px；
边框颜色：黑色透明；
边框样式：实心；
高度：50px；
}

---

我们都知道span是一个内联元素，因此您必须将其设置为内联块元素，以获取span的实际空间。加上

span {
display: inline-block;
}

在CSS中。

---

边界宽度问题将得到解决（Y）。

这是答案的一部分；这样做的替代方法。我仍然不知道这是为什么或如何发生的

.lower，
.上{
边框样式：实心；
显示：内联块；
}
.下{
边框宽度：0 50px 50px 50px；
边框颜色：透明黑色透明；
}
.上{
边框宽度：50px 50px 0 50px；
边框颜色：黑色透明；
}

---

我认为这是由于

border-width: 50px 50px 0 50px;

.lower{
边框宽度：50px；
边框颜色：黑红绿蓝；
边框样式：实心；
}
.上{
边框宽度：50px 50px 0 50px；
边框颜色：黑色透明；
边框样式：实心；
高度：50px；
}
disp.先生{
显示：内联flex；
}

你说的“抓住实际空间”是什么意思？另外，请提供参考资料。实际上，这些是HTML和CSS的基础。当我们开始学习HTML时，我们必须记住标记和类型（内联或块）。内联元素总是根据给定的行高度占用空间。所以，如果您想在内联元素上正确地实现边距和填充，您必须使它们成为内联块或内联块。

    .lower {
      border-width: 50px;
      border-color: black red green blue;
      border-style: solid;
    }

    .upper {
      border-width: 50px 50px 0 50px;
      border-color: black transparent transparent transparent;
      border-style: solid;
      height: 50px;
    }
    .disp {
      display: inline-flex;
    }
    <div class="triangles disp">
       <span class="lower"></span>
       <span class="upper"></span>
       <span class="lower"></span>
    </div>