html - 当边框顶部和底部从左侧和右侧获得更高的值时，它们似乎更短？

Question

当我在元素的两侧使用较低的值时，边界似乎很短，这是要检查的 jsFiddle。当它们具有不同的值时，我如何拉直边边框？希望能找到解决办法。

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

Answer 1

他们将永远那样做。正如您在自己的示例中看到的那样，边界由对角线划分。您可以通过将两个跨度相互包装来实现您的行为。一个用于垂直边框，另一个用于水平边框。

小提琴示例

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

顺便说一句：我建议box-sizing: border-box对元素的宽度和高度进行更直观的行为（比较填充行为）：

小提琴示例