如何缩小Django模板中渲染的复选框之间的间距？

现有代码情况 #

视图函数代码 #

def sendApproval(request):
    form = SendApp
    data = Profile.objects.filter(Admin="Lavanya")
    context = { "form": form,"data":data}
    return render(request, 'homePageHtml/SendApproval.html', context)

模板渲染代码 #

{%for a in data%}<br>
  <input type="checkbox" id="recommender" name="choosen" value="{{a.UserName}}" >
  <label for="recommender" style="font-size:15px"> {{a.UserName}}</label><br><br>
{%endfor%}

尝试过的无效CSS #

.adjust-line-height {
  line-height: 1em;
}

问题原因 #

1. 模板中存在多余的<br>标签：循环开头的<br>以及结尾的两个<br>，会导致每个复选框项之间产生额外的换行间距。
2. 未将CSS类应用到目标元素：你定义的.adjust-line-height类没有添加到任何HTML元素上，自然不会生效。
3. 存在重复的id属性：循环中所有复选框的id都是recommender，违反HTML规范，会导致label关联失效。

有效解决方法 #

步骤1：修改模板代码，清理多余标签并修复id #

移除多余<br>，同时给每个复选框设置唯一的id：

{% for a in data %}
  <div class="checkbox-item">
    <input type="checkbox" id="recommender-{{a.id}}" name="choosen" value="{{a.UserName}}">
    <label for="recommender-{{a.id}}" style="font-size:15px;"> {{a.UserName}}</label>
  </div>
{% endfor %}

步骤2：添加CSS控制间距 #

通过容器的margin属性精确控制每个复选框项的上下间距，替代<br>的硬换行：

.checkbox-item {
  margin: 6px 0; /* 可根据需求调整上下间距大小 */
  line-height: 1.2em; /* 控制文字行高 */
}

简化方案（不新增容器） #

如果不想添加<div>容器，也可以直接清理<br>并调整元素样式：

{% for a in data %}
  <input type="checkbox" id="recommender-{{a.id}}" name="choosen" value="{{a.UserName}}" class="checkbox-input">
  <label for="recommender-{{a.id}}" style="font-size:15px;"> {{a.UserName}}</label><br>
{% endfor %}

对应的CSS：

.checkbox-input {
  margin-bottom: 6px;
}
label {
  margin-bottom: 6px;
}

内容的提问来源于stack exchange，提问作者LAVANYA GANESH TADAVARTI