Question

我正在尝试使用float的容器，但无法弄清楚为什么.right div框上方有多余的空白。当我删除图像时，空间消失了。但是，当将图像放回去时，红色部分上方有间距。有人可以帮我了解为什么会这样吗？

#container {
    width: 1000px;
    margin: 0 auto;
    background-color: lightgray;
}

.left {
    width: 700px;
    float: left;
    background-color: blue;
}

.right {
    width: 300px;
    margin: 0 0 0 700px;
    background-color: red;
}

<html>
<head>
</head>

<body>
<div id="container">

    <img src="https://picsum.photos/300/300?image=0">

    <div class="left">
        <p>Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here.</p>
    </div>

    <div class="right">
        <p>Insert dummy text here. Insert dummy text here.</p>
    </div>

</div>
</body>
</html>

Answer 1

取出<p>标签或增加0边距。

#container {
    width: 1000px;
    margin: 0 auto;
    background-color: lightgray;
}

.left {
    width: 700px;
    float: left;
    background-color: blue;
}

.right {
    width: 300px;
    margin: 0 0 0 700px;
    background-color: red;
}

p {
  margin: 0;
}

<div id="container">

        <img src="https://www.billboard.com/files/styles/768x433/public/media/Backstreet-Boys-1997-portrait-billboard-1548.jpg" height="100">
        
    <div class="left">
        <p>Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here.</p>
    </div>

    <div class="right">

        <p>Insert dummy text here. Insert dummy text here.</p>
    </div>

</div>

为什么侧边栏<div>上方有空间

1 个答案: