div内のCSSボーダー

Question

同じような幅のdivがいくつかありますが、そのうちの1つにパターンからはみ出している境界線があります。

境界はdivの内部に入るようにそれを作るための方法はありますか？私はここで

box-sizing: border-box; 

が、私は問題が.rankDisplayerのdivにmarginであり、実際のコードを、とのコメントに続いて、これまで

#firstDiv { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    max-width: 480; 
 
    margin-right: 10; 
 
    background: #eeeeee; 
 
    border-left: 10px solid #608cc9; 
 
    padding-top: 15; 
 
    padding-bottom: 15; 
 
    text-align: center; 
 
} 
 
#right {float: right} 
 
.divList { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    max-width: 480; 
 
    margin-right: 10; 
 
    background: #fdead3; 
 
    padding-top: 15; 
 
    padding-bottom: 15; 
 
    text-align: center; 
 
}

<div id="right"> 
 
    <div id="firstDiv"> 
 
    <span>NA STANDINGS</span> 
 
    </div> 
 
    <div class="divList"> 
 
    <span>1</span> 
 
    </div> 
 
</div>

Answer 1

を得たものである試みました。

.rankDisplayer { 
    display: flex; 
    flex-wrap: nowrap; 
    align-items: center; 
    background-color: #eeeeee; 
    border-color: #eeeeee; 
    margin: 10; 
} 

は削除margin: 10あなたがそこに持っており、それはOKになります。
もう1つのオプション - margin: 10 0に変更します（この方法で、上下の余白を残し、左右のものを削除します）。

Answer 2

ボーダーはでにすることはできません。それはパッドのものです。あなたがそれらを垂直に整列させたいなら、私はあなたが底の1つを広げることができるか、または1つを少し小さくすることができると思います。これを解除するには、paddingを使用します。

#firstDiv { 
    ... 
    width: 470px; 
} 

//OR 

#divList { 
    ... 
    padding-left: 10px; 
} 

今、私はあなたのCSSでの1つの変更を提案しています。ほとんど同じCSSプロパティを持つ2つのIDを持っています：なぜこれらのdivのクラスを作成しないのですか？

#firstDiv { 
    width: 470px; 
    background: #eeeeee; 
    border-left: 10px solid #608cc9; 
    padding: 15px 0; 

} 
.divList { 
    width: 480px; 
    background: #fdead3; 
    padding: 15px 0 15px 10px; 
} 

.divs_from_right_div { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    margin-right: 10px; 
    text-align: center; 

}