Search code examples
htmlcssdjangodjango-widget-tweaks

How to visualize padding and margins in django templates and reducing white space between rows in bootstrap

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? form with too much vertical space between rows

Solution

  • Chrome Dev tools are your best friend, hit F12 and you'll see all your elements, select the element you want to see and you can even change padding live to see what it will look like. Firefox also has great css dev tools