I'm new to html and Django, and Bootstrap. I sometimes have trouble understanding the padding and margins. Is there some kind of clever way to use CSS to show the padding and margins visually. From what I can tell margins don't have a background color and are transparent. For example in the code below I would like to reduce the vertical space between the fields so the form would be more compact. If I just use HTML I don't seem to have a problem, but when I am using widget_tweaks I get additional space between the rows.
{% load widget_tweaks %}
{% block content%}
<div class="containter p-4">
<div class="py-0 text-Left">
<div>
<h2>Just a title for the page:</h2>
</div>
<form action="{% url 'addINNO:add_new' %}" method="POST">
{% csrf_token %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% for field in form.visible_fields %}
<div class="row py-0 ">
<div class="form-group py-0 col-9">
<div class="form-group py-0">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{% if field.id_for_label == 'id_description' %}
{{ field|add_class:'form-control p-0'|attr:"rows:3"}}
{% for error in field.errors %}
<span class="help-block">{{ error }}</span>
{% endfor %}
{% elif field.id_for_label == 'id_comment' %}
{{ field|add_class:'form-control p-0'|attr:"rows:2"}}
{% for error in field.errors %}
<span class="help-block">{{ error }}</span>
{% endfor %}
{% else%}
{{ field|add_class:'form-control p-0' }}
{% for error in field.errors %}
<span class="help-block">{{ error }}</span>
{% endfor %}
{% endif %}
</div>
</div>
</div>
{% endfor %}
<input type="submit" value="Save and Return to Home Page">
</form>
</div>
</div>
{% endblock %}
When I right click and inspect elements, I don't see any margins that are not 0px and padding also seems to be 0 px.
So what am I missing? How can I reduce the white space between rows?
