删除 CSS 列的额外底部填充

Question

我有一个 CSS 列布局。

但是我发现底部有一个不必要的空隙（在屏幕截图中用粉红色箭头表示）。

如果我从 CSS 中删除 display: inline-block，这个间隙就会消失，但随后一些 <section> 元素会分成两部分。我也试过使用 break-inside: avoid 但它似乎什么也没做。

有解决办法吗？

<div class="feed-index">
    <div class="feed">
        <section>
            Lorem ipsum dolor sit amet
        </section>

        <section>
            Lorem ipsum dolor sit amet
        </section>

        <section>
            Lorem ipsum dolor sit amet
        </section>

        <section>
            Lorem ipsum dolor sit amet
        </section>

        <section>
            Lorem ipsum dolor sit amet
        </section>
    </div>
</div>

.feed-index .feed {
    column-count: 3;
    column-gap: 40px;
}

.feed-index .feed > section {
    display: inline-block;
    margin-bottom: 50px;
    overflow: hidden;
}

Answer 1

为 .feed-index .feed > section

添加 vertical-align:top; 到你的 CSS

原因是您的 overflow: hidden; 实际上更改了块。在此处查看更多信息：Why does x-overflow:hidden cause extra space below?

删除 CSS 列的额外底部填充

Remove extra bottom padding on CSS columns

html

css

margin

padding

multiple-columns