Still fairly new to the world of html, Django, and Bootstrap. I find myself struggling with grasping the concept of padding and margins. Is there a clever trick or CSS technique to visually display the padding and margins? I've noticed that margins don't have a background color and are rather transparent. For instance, in the code snippet below, I'd like to minimize the vertical gap between the fields to create a more compact form. While using plain HTML doesn't seem to present any issues, as soon as I turn to widget_tweaks, extra space inexplicably appears 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 %}
Upon inspecting elements by right-clicking, I'm having a hard time pinpointing any margins other than 0px and padding similarly appears to be set to 0 px.
What am I overlooking? How can I minimize the white space between the rows? https://i.sstatic.net/S3Zez.png