html - 如何使用 CSS 折叠一组 标签的边框？

Question

我有一个由 DIV 组成的网格，宽度固定，边框为 1 像素。现在两个 DIV 相互接触，显然边框变成了 2px。

我怎样才能在整个网格中得到一个 1px 的边框？

这就是我的意思:

http://jsfiddle.net/Before/4uPtj/

HTML:

<div class="gridcontainer">
  <div class="griditem"></div>
  <!-- 15 more times -->
</div>

CSS:

div.gridcontainer
{
  width: 80px;
  line-height: 0;
}

div.griditem
{
  display: inline-block;            
  border: 1px solid black;
  width: 18px;
  height: 18px;
}

Answer 1

试试这个:

div.griditem
{
    display: inline-block;            
    border: 1px solid black;
    width: 18px;
    height: 18px;
    margin-left: -1px;
    margin-bottom: -1px;
}