Html CSS位置div在相同的增量，无论大小？

我正在制作一个垂直（向下滚动）RSS提要，其中图像具有不同的高度。现在，我的div框适合相应的内容，但是过大的框与下面的框重叠。我想对每个盒子之间的空间进行一组测量。例如，一个框的高度可能为500像素，另一个框的高度可能为200像素，下面的框的高度可能为150像素。我希望盒子之间的空间是一样的

#feedbox {
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 0 30px rgb(5, 58, 130);
        text-align: center;
        position: relative;
        left: 50%;
        top: 300px;
        transform: translate(-50%, -50%);
        width: 450px;
        height: 100%;
    }

我还使用jinja动态创建图像，如果这会影响任何内容：

{% for row in feed %}
            <div id='feedbox'>
                <h1>{{ row.title }}</h1>
                <p>{{ row.description }}</p>
                <a href={{ row.link }}>Read more</a>
                <p>{{ row.displayDate }}</p>
                <img style='width: 100%; max-width: 400px; max-height: 400px;' src={{ row.image }} alt='Image'>
            </div>
{% endfor %}

{%用于提要%中的行]
{{row.title}}
{{row.description}}

{{row.displayDate}}

{%endfor%}

为每个图像设置容器的

边距底部

css，使其成为您希望在它们之间设置的空间量。

#feedbox

元素是网页的容器还是图像的容器？如果它是网页的容器，也可以使用div或其他东西作为每个图像的容器来实现这一点。

将每个图像的容器的

边距底部

css设置为您希望它们之间的设置空间量。

#feedbox

元素是网页的容器还是图像的容器？如果它是网页的容器，也可以使用div或其他东西作为每个图像的容器来实现这一点