显示边距的 div答案

【问题标题】：div displaying a margin显示边距的 div
【发布时间】：2013-09-24 05:34:12
【问题描述】：

我正在尝试使用divs 和不同的background-colors 制作一个游戏板，所以我写了一些简单的css（我只是在这个阶段弄清楚如何做，我写了divs手动 - 所以我不包括 html/js）

.grass {
    background-color: oliveDrab;
}

.dirt {
    background-color: sandyBrown;
}

div{
    height: 25px;
    width: 25px;
    display: inline-block;
    margin: 0;
}

当我渲染它时，有一个边距。像这样：

所以我检查了萤火虫，它显示margin，border，而padding 是0！！

DEMO fiddle.

我被引导觉得我在这里缺少一些非常基本的 css 知识。

【问题讨论】：

ID 属性应该是唯一的。看起来您有大量 ID 为“board”的 HTML 元素。
您可能还想查看box-sizing: border-box;paulirish.com/2012/box-sizing-border-box-ftw
@CoryDanielson 我注意到这只是一个测试，我是通过复制粘贴写的，但还是谢谢你。

标签： html margin css

【解决方案1】：

内联和内联块级元素对空白很敏感。

这是您的演示的 jsFiddle 示例，删除了第一行中的空白。

jsFiddle example

<div id = "board" class = "grass"></div><div id = "board" class = "grass"></div><div id = "board" class = "grass"></div><div id = "board" class = "grass"></div><div id = "board" class = "grass"></div><div id = "board" class = "grass"></div>

【讨论】：

omfg 我没意识到有空格。
除了删除空白之外，您还可以查看此站点以了解其他一些可以使用的技术davidwalsh.name/remove-whitespace-inline-block
这会产生非常丑陋且难以使用 HTML。此外，ID 需要固定。
@CoryDanielson - 我向 OP 解释了问题的原因并发布了几个解决方案。没有什么可以做的了。
@tryingToGetProgrammingStraight - 如果有一些建筑批评，我不介意投反对票。

【解决方案2】：

这是因为有inline-block元素。

要么删除标记中的空白，添加负边距，要么使用浮动元素而不是 display:inline-block。

Here is another example:

可能是最好的解决方案。

body {
    width:150px;
}
div {
    float:left;
}

jsFiddle with negative margins

jsFiddle with white space removed

【讨论】：

@allcaps 这是迄今为止我看到的最好的答案，如果你做出这个答案我会接受。
@tryingToGetProgrammingStraight 我在更新中包含了浮点数。jsfiddle.net/ydaWg/19
@JoshC 实际上我已经接受了一个，无论如何 thnx 和 +40 代表来之不易。
@tryingToGetProgrammingStraight 哇老兄。我是第一个回答的！
@JoshC 我知道，但他又短又甜，是我看起来很可爱的东西 4...我希望我可以添加更多代表 2 u 4 ur 帮助。

【解决方案3】：

因为您不需要将文本设置为 font-size 样式为 0。这样空白就不会干扰。

body {
    font-size: 0px;
}

Working demo

【讨论】：

这也是一个不错的小技巧，但是，如果您确实需要使用字体，ems 将不起作用。
@JoshC 如果我在“容器”div 内，它会起作用。

【解决方案4】：

同意@j08691：内联和内联块级元素对空格很敏感。

但无需调整您的 html 标记：

div {
   height: 25px;
   width: 25px;
   display: block;
   float: left;
}

br { 
   clear: both; 
}

fiddle.

【讨论】：

@tryingToGetProgramming：奖金，将 br 放在您的 html 中并使用 nth-child。例如： div:nth-child(6n+7) { clear:left; }