出现在 div 之间的间距（边距？/填充？）[重复]

Question

我正在尝试创建一个由点、线和框（所有 div 元素）组成的网格。出于某种原因，他们似乎从margin: 2px; 之类的东西开始，而设置margin: 0px 并没有摆脱这一点。设置-2px 让我到达某个地方。但是这里的交易是什么？他们为什么不碰？

标记在这两个divs 之间交替：

<div class="row_short">
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
</div>
<div class="row_tall">
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
</div>

CSS：

body {
    margin: 0px;
    padding: 0px;
}
table {
    margin: 0px;
    padding: 0px;
}
.dot {
    height:5px;
    width:5px;
    background-color:black;
    display: inline-block;
}
.vbar {
    height:30px;
    width:5px;
    background-color: #CCCCCC;
    display: inline-block;
}
.vbar:hover {
    background-color:purple;
}
.hbar {
    height:5px;
    width:30px;
    background-color: #CCCCCC;
    display: inline-block;
}
.hbar:hover {
    background-color:purple;
}
.square {
    height:30px;
    width:30px;
    background-color: #ff88cc;
    display: inline-block;
}
.row_short {
    display: inline-block;
    position:relative;
}
.row_tall {
    display: block;
    position:relative;
}

JSFiddle

Answer 1

您的代码中有空格被渲染为空格，从而产生 2px 间隙的错觉。

您可以将代码简化为单行代码：

<div class="dot"></div><div class="hbar"></div>...

或者使用 cmets 来分隔换行符和空格：

<div class="dot"></div><!--
--><div class="hbar"></div>

您还可以在父元素上设置font-size: 0;（在演示中它必须是body，但由于显而易见的原因这是一个坏主意），这也将折叠所有间距而无需编辑HTML .不过，如果您想在其中添加文本，则需要将 font-size: 1rem 重置为子元素。