Question

有人可以帮助我解决以下问题吗？如何清除div“顶部”和div“中间”之间的空间？这只是我的HTML代码的一部分。在浏览器中，我可以看到两个div之间有一个空白。如何摆脱空间？

<div class="container">
        <div class="top">

        </div>

        <div class="middle">

        </div>
</div>

Answer 1

我以前使用过一种解决方案，但是它很hacky，通常意味着您在其他地方犯了一个错误（错误的CSS，不良的html标记等）

如果将font-size: 0;赋予容器元素，它将以0的字体大小显示div之间的“空格”，这将缩小间隙。

但这会影响.container中子元素中的字体大小。

就像我说的那样，您可能在其他地方有CSS规则可以加以改进以防止您使用此hack。

但是，这应该从间隙中的空白中删除页面上的空白。

.container {
    font-size: 0;
}

编辑： Flex通常可以帮助您做出响应式且流畅的布局，从而避免出现此类问题。

Answer 2

“ 我可以看到两个div之间有一个空白。”

没有所有代码或屏幕截图，这并不意味着什么。

如果空白将两个div垂直分开，则可以减少或消除边距：

.container div { margin: 0; }

添加样式还会减少两个水平分隔的div之间的空白。

但是，如果要完全删除空格，请从源代码中删除空格：

<div class="top">
    ...
</div><div class="middle">  <!-- change here -->
    ...
</div>

即现在，“ / div”和“ div”标记之间没有空格。

Answer 3

您可以在容器类中使用flexbox实现此目的：

<style>
    .container {
        display: flex;
        flex-direction: column;
    }

    .top {
        width: 100px;
        height: 50px;
        background-color: red;
    }

    .middle {
        width: 100px;
        height: 50px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="top">
        <p>Top</p>
    </div>

    <div class="middle">
        <p>Middle</p>
    </div>
</div>

with flexbox

without flexbox

清除两个div之间的空间

3 个答案: