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，包括容器

CSS div边界差异

1 个答案: