html - 设置div边距，并设置显示: inline-block

Question

我有三个 div 元素，它们具有以下 ID 的 #body、#firstDiv 和 #secondDiv。

我正在尝试在 #body 上设置 top: 0 和 left: 0，但由于某些原因，它给了我大约 5每个像素。起初我以为是边距，我将边距设置为 0 像素后，它仍然显示周围有 5 像素左右的空间。

此外，我正在尝试让 #firstDiv 和 #secondDiv 并排放置，而不是彼此重叠。我设置了 display: inline-block，但这并没有改变任何东西。

我做错了什么？

#body {
    background-color:black;
    top: 0px;
    left: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}

#firstDiv {
    background-color:red;
    display: inline-block;
    width: 50%;
    height: 50%;
}

#secondDiv {
    background-color:green;
    display: inline-block;
    width: 50%;
    height: 50%;
}

<div id = 'body'>

    <div id = 'firstDiv'> firstDiv </div>
    <div id = 'secondDiv'> secondDiv </div>

</div>

Answer 1

边距位于 body 元素本身，而不是 #body div。

left: 0 和 right: 0 不影响静态定位的元素，如果你想绝对定位这些元素使用 position: absolute;，但看起来您只是遇到了正文边距的问题。

并且，当您将元素设置为 display: inline-block 时，标签之间的空白将呈现为单个空白字符，请设置 font-size: 0在父级上，font-size: 1rem 在所有子级上。

body {
    margin: 0;
}

#body {
    background-color:black;
    height: 100%;
    font-size: 0;
}

#body > * {
    font-size: 1rem;
    display: inline-block;
    vertical-align: top;
}

body {
    margin: 0;
}

#body {
    background-color:black;
    height: 100%;
    font-size: 0;
}

#body > * {
    font-size: 1rem;
    display: inline-block;
    vertical-align: top;
}

#firstDiv {
    background-color:red;
    width: 50%;
    height: 50%;
}

#secondDiv {
    background-color:green;
    width: 50%;
    height: 50%;
}

<div id = 'body'>

    <div id = 'firstDiv'> firstDiv </div>
    <div id = 'secondDiv'> secondDiv </div>

</div>