Question

我正在尝试创建一个由点，线和框组成的网格（所有div元素）。出于某种原因，似乎他们开始使用类似margin: 2px;的内容，并且设置margin: 0px并没有摆脱这种情况。设置-2px让我在某处。但这里的交易是什么？为什么他们不接触？

标记在这两个div之间交替显示：

<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>...

或使用注释来分隔换行符和空格：

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

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

div之间出现间距（margin？/ padding？）

1 个答案: