html - 为什么我的跨度顶部边框小于底部边框？

Question

我想要三个三 Angular 形排成一条直线，其中第一个和第三个朝上，中间一个朝下。现在，第一个和第三个(下方的三 Angular 形)没问题，我在处理中间的三 Angular 形时遇到了问题。

为什么上三 Angular 这么小？

否则我怎么会有这样的安排？

.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;
}

<div class="triangles">
  <span class="lower"></span>
  <span class="upper"></span>
  <span class="lower"></span>
</div>

Answer 1

众所周知，span 是一个内联元素，因此您必须将其设为内联 block 元素，以便为 span 占用实际空间。只需添加

span {
display: inline-block;
}

在 CSS 中。 边框宽度问题将被修复(Y)。