CSS div 边框差异

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 将影响页面中的所有div，包括容器