CSSの枠線の矛盾

Question

私は水平なdivの行を持っています。私の問題は、最初のものが他のすべてのものよりも太い境界線を持っていることです。これらの境界線はヘッダーとの間に小さなギャップを持っています。

CSS：

.seperate{ 
    background-image: url("midnight.png"); 
    background-repeat: repeat-x; 
    background-attachment: fixed; 
    width: 100px; 
} 
.container{ 
    white-space: nowrap; 
} 
div{ 
    border: 1px solid black; 
    display:inline-block; 
    white-space: normal; 
    height:600px; 
    width: 450px; 
    padding: 10px; 
    padding-top: 0; 
    padding-left: 0;  
    vertical-align: top; 
} 

HTML：

<div> 
test 
</div><!-- 

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

JSFiddle：この問題の原因とどのように私はそれを修正することができている何

https://jsfiddle.net/hgpkbqg5/1/

？

Answer 1

使用、

.seperate{ 
    background-image: url("midnight.png"); 
    background-repeat: repeat-x; 
    background-attachment: fixed; 
    width: 100px; 
} 
.container{ 
    white-space: nowrap; 
} 
.container div{ 
    border: 1px solid black; 
    display:inline-block; 
    white-space: normal; 
    height:600px; 
    width: 450px; 
    padding: 10px; 
    padding-top: 0; 
    padding-left: 0;  
    vertical-align: top; 
} 

div要素のCSSはまあ、あなたが**すべての**分割要素に境界線を適用しているコンテナ