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

彼らは常にそのように振る舞います。独自の例でわかるように、境界線は対角線で分割されています。2 つのスパンを互いにラップすることで、この動作を実現できます。1 つは垂直方向の境界線用、もう 1 つは水平方向の境界線用です。

フィドルの例

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

ところで：box-sizing: border-box要素の幅と高さのより直感的な動作をお勧めします（パディング動作を比較してください）：

フィドルの例