for文が回るごとに余白を開けたい

Question

###前提・実現したいこと
for文が回るごとに余白を開けたいが今はすべての要素がくっついてしまっている。

###発生している問題・エラーメッセージ
特にエラーは発生していない。

###該当のソースコード
htmlに

    <div class="col-sm-8">
        {% for product in products.all %}
            <h4> {{ product.product_title }}</h4>
            {{ product.image|safe }}
            <p> {{ product.body }} </p>

        {% endfor %}
    </div>

とcssに

.col-sm-8{
    background-color: black;
    width: 800px;
    margin:50px 400px;
}

書いた。

###試したこと
どのようにしたらfor文が回るごとに余白を開けられるかわからない。（新しく何かタグを追加するとか？）

Answer 1

Python、Djangoを使ったことが無いので的外れな回答ならご指摘ください。

{% for product in products.all %}と{% endfor %}の間がループするのであれば、
h4とpを囲うようなdivを作り、そのdivに余白の設定をすればいいのではないでしょうか。

    <div class="col-sm-8">
        {% for product in products.all %}
            <div class="box"> <!-- add -->
            <h4> {{ product.product_title }}</h4>
            {{ product.image|safe }}
            <p> {{ product.body }} </p>
            </div> <!-- add -->
        {% endfor %}
    </div>

.box{
	margin: 0px 0px 0px 0px; /* 上　右　下　左
または　margin: 0px 0px;  上下　左右　でお好きな数字を */
}

クラス名は適当です。