Question

我遇到了一个无法删除div之间空格的问题。我已经加入了我的标记，CSS和小提琴：http://jsfiddle.net/kW5uW/12/

尽管设置了保证金并且padding为零，我仍然在div之间看到空格，我该如何删除它？我希望所有的盒子彼此相邻。

CSS和标记：

＆＃13;

.segment {
  width: 20px;
  height: 20px;
  background: grey;
  border: 1px solid black;
  display: inline-block;
  padding: 0px;
  margin: 0px;
}

.container {
  padding: 0px;
  margin: 0px;
}

＆＃13;

<div class="container">
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
</div>

＆＃13;

任何建议都将不胜感激。感谢。

Answer 1

内联元素对空白区域敏感。解决这个问题的一种方法是删除div之间的空白区域：

<div class="container">
    <div class="segment"></div><div class="segment"></div><div class="segment"></div><div class="segment"></div><div class="segment"></div>
</div>

<强> jsFiddle example

你也可以：

向左浮动（ jsFiddle example ）
将父div的字体大小设置为零（ jsFiddle example ）
使用HTML评论（ jsFiddle example ）

Answer 2

我可以通过将您的segment班级CSS更改为以下内容来解决此问题：

.segment {
    width: 20px;
    height: 20px;
    background: grey;
    border: 1px solid black;
    display: block;
    float: left;
    padding: 0px;
    margin: 0px;
}

即使边距和填充为零，Div仍然有空格

2 个答案: