html - 当 border top 和 bottom 从左边和右边得到更高的值时，它们看起来更短？

Question

当我在一个元素的两边使用较低的值时，它看起来很短，here is jsFiddle to inspect.当它们具有不同的值时，我如何拉直边线？希望能找到解决方法。

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

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

Fiddle-Example

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

顺便说一句:我建议使用 box-sizing: border-box 以获得更直观的元素宽度和高度行为(比较填充行为):

Fiddle-Example