Question

我试图摆脱s之间的空间。我希望这个网格完全是4个div。我已经尝试将所有边距和填充以及边框设置为0。

<div id="grid">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>

    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>

    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>

    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

#grid{
    width: 100px;
    height: 100px;
    margin: 0px;
    padding: 0px;
    border: 0px;
}
.child{
    background-color: lightpink;
    width: 25px;
    height: 25px;
    display: inline-block;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

Answer 1

内联元素允许空格。要删除它，您可以对子元素（在您的情况下为div）或float:left使用font-size:0px到父元素（即网格）

.child
{
float:left;
}

OR

#grid
{
font-size:0px;
}

Answer 2

你需要一个漂浮物：左;在儿童班这将使div尽可能地向左移动，当它们在#grid div中耗尽空间时，它们继续在下一行，就像阅读一样。尽管如此，这需要一个空的div，在它的最后，风格清晰：两者;女巫很好地对待它，并确保没有任何“故障”，有些事情会发生。

我让你骗过你：

jsfiddle.net/WQdxS /

Answer 3

您可以设置：

.child{
    display: block;
    float: left;
}

解决问题＆amp;获得4x4网格w /没有空格。

如上所述，问题是使用display-inline.

无论如何，Div应该是块级元素。为什么要使这些内联？将它们视为块级元素＆amp;问题解决了自己没有采取删除空格或任意设置font-size：0的怪癖，因为不包含任何文本的元素。

是什么导致元素之间的边缘？我怎么能摆脱他们？

3 个答案: