Html 当边界顶部和底部从左侧和右侧得到更高的值时，它们看起来更短？

当我在元素的两侧使用较低的值时，边界看起来很短，当它们具有不同的值时，如何拉直侧边界？希望能找到解决办法

span {
    float: left;
    border-top: 10px solid red;
    border-bottom: 10px solid red;
    border-right: 1px solid blue;
    border-left: 1px solid blue;
    padding: 0 10px 0 20px;
    background: orange;
}

---

他们的行为总是这样。正如您在自己的示例中所看到的，边界由对角线分割。您可以通过将两个跨距相互缠绕来实现您的行为。一个用于垂直边界，另一个用于水平边界

这里的问题是，左右边界较短

顺便说一句：我建议

框大小：边框框

更直观地显示元素的宽度和高度（比较填充行为）：

<span class="vertical">
    <span class="horizontal">
    Problem Here, left and right border is shorter
    </span>
</span>