css - さまざまな境界線の幅で行の高さが等しい (border-box)

Question

この単純化された例では、4 つの円があり、それぞれ境界線の幅が異なります。水平方向に整列するために、それぞれの線の高さを等しく維持しようとしています。

ただし、境界線の幅は行の高さに影響を与えるようです (技術的にはボックスの外にあるにもかかわらず?)

各行の高さを手動で調整せずにこれを解決する方法はありますか?

width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid #1daeec;
line-height: 50px;

score 1 · Accepted Answer

CSS は正常に動作し、トップセクションから一部を削除するだけです。

* {
    margin: 0px;
    padding: 0px;

}

score -1 · Accepted Answer

これに出くわし、テーブルセルを使用せずにそれを行う方法を考えました。私の解決策はおそらく最善ではありませんが、とにかく共有することにしました。 http://codepen.io/svdovichenko/pen/rObzqM?editors=110

追加<span>1</span>(この例では使用しなかったスパム内のクラスを使用できます)

.stat{
    position: relative;
}

と

span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

3 に答える 3