时间戳

首页 > 解决方案 > 为什么侧边栏上方有空间

html - 为什么侧边栏上方有空间

问题描述

我正在尝试使用 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>

标签： htmlcss

解决方案

取出<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>

推荐阅读