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

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

他们总是会那样做。正如你可以看到你自己的例子，边界被对角线分开。你可以通过将两个跨度相互包裹来实现你的行为。一个用于垂直边框，另一个用于水平边框。

Fiddle-Example

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

BTW：我建议box-sizing: border-box的宽度和高度为元素更直观的行为（比较填充行为）：

Fiddle-Example