Question

我有三个div元素，其中包含以下ID #body，#firstDiv和#secondDiv。

我试图在top: 0上设置left: 0和#body，但由于某些原因，它给我大约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元素本身，而不是left: 0 div。

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>

{{1}}

Answer 2

left和right对于具有静态位置的元素没有任何结果。
将padding: 0;和margin: 0;添加到html和body。
你的div在另一个之下，因为它们不合适。第2点应该修复它。

设置div边距，并设置display：inline-block

2 个答案: