ピクセルがありませんcss固定divラッパー

Question

私は、幅と高さの固定ピクセルを使用してラッパーに完全に収まるようにdivを取得しようとしています。ピクセルが正しくどのように加算されないのか混乱しますが。

HTML

<div class="div1"> 
     <img src="image.png" alt="image" class="image"> 
    </div> 

    <div class="div2"> 

    </div> 

    <div class="div3"> 

    </div> 

    <div class="div4"> 

    </div> 
</div> 

CSS

#wrapper { 
    height: 455px; 
    width: 690px; 
    background-color: grey; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 10px; 
    overflow: hidden; 
    white-space:nowrap; 
} 

.div1 { 
    display: inline-block; 
    margin-bottom: 10px; 
    vertical-align:top; 
} 

.image { 
    max-width: 172px; 
    max-height: 172px; 
    border-radius: 2%; 
    border: 4px solid blue; 
} 

.div2 { 
    height: 172px; 
    width: 277px; 
    border: 4px solid blue; 
    display: inline-block; 
    margin-left: 30px; 
    background-color: purple; 
} 

.div3 { 
    width: 159px; 
    height: 188px; 
    display: inline-block; 
    margin-left: 30px; 
    border-left: 4px solid blue; 
    border-right: 2px solid blue; 
    border-top: 2px solid blue; 
    vertical-align: top; 
    background-color: purple; 
} 

.div4 { 
    background: url(image.png) no-repeat center; 
    background-size: cover; 
    width: 690px; 
    height: 265px; 
} 

子のdivが計算された幅、マージンやボーダーで690まで追加することができない理由は、親のdivは690px広い場合。

（DIV1）180 + 30 +（DIV2）285 + 30 +（DIV3）165 = 690px

あなたはdiv要素3を見れば、それは右の境界は見ることができないのです。あなたはそれを見るために7px幅を減らさなければなりません。

div4を正確にタッチすることを目的とした190pxのdiv3の高さで垂直方向にも起こっていますが、4pxだけずれています。

これはブラウザの問題ですか？私が気付いていないデフォルトのアライメントの問題？なぜこれが起こるのか知りたいのは本当に不思議です！

フィードバックは高く評価されます。 ：）

Answer 1

あなたがHTMLにこのようなコメントを入れる場合は、私はSO Iは、1行目をつけたの

OKを試し続け、まだ知らない2行目にトップが、画像のために修正することができますdivの「テスト」で、彼に表示gaved：ブロックとオーバーフローが下のスペースを奪うようにして、私はDIV1固定heigthと幅180ピクセル（画像+ボーダー）を得なかった隠された

#wrapper { 
 
    height: 455px; 
 
    width: 690px; 
 
    background-color: grey; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 10px; 
 
    overflow: hidden; 
 
    
 
} 
 

 
.test{ 
 
    display:block; 
 
    overflow: hidden; 
 
} 
 
.div1 { 
 
    height:180px; 
 
    width:180px; 
 

 
    display: inline-block; 
 
    margin-bottom: 10px; 
 
    vertical-align:top; 
 
     
 
} 
 

 
.image { 
 
    max-width: 172px; 
 
    max-height: 172px; 
 
    border-radius: 2%; 
 
    border: 4px solid blue; 
 
} 
 

 
.div2 { 
 
    height: 172px; 
 
    width: 277px; 
 
    border: 4px solid blue; 
 
    display: inline-block; 
 
    margin-left: 30px; 
 
    background-color: purple; 
 
} 
 

 
.div3 { 
 
    width: 159px; 
 
    height: 188px; 
 
    display: inline-block; 
 
    margin-left: 30px; 
 
    border-left: 4px solid blue; 
 
    border-right: 2px solid blue; 
 
    border-top: 2px solid blue; 
 
    vertical-align: top; 
 
    background-color: purple; 
 
} 
 

 
.div4 { 
 
    background: url('http://lorempixel.com/690/265/cats') no-repeat center; 
 
    background-size: contain; 
 
    width: 690px; 
 
    height: 265px; 
 
    display:block; 
 
     overflow: hidden; 
 
} 
 

 

<div id="wrapper"> 
 
    <div class="test"> 
 
    
 
    
 
    <div class="div1"> 
 

 
    <img src="http://lorempixel.com/172/172/cats" alt="image" class="image"> 
 

 
    </div><!-- 
 

 
    --><div class="div2"> 
 

 
    </div><!-- 
 

 
    --><div class="div3"> 
 

 
    </div><!-- 
 

 
    --> </div><div class="div4"> 
 

 
     </div> 
 
    </div>

を

Answer 2

あなたはボックスサイズ設定機能をチェックアウトしましたか？ 参考になるリンクがいくつかあります。

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing