如何可视化 django 模板中的填充和边距并减少 bootstrap 中行之间的白色 space

Question

我是 html 和 Django 以及 Bootstrap 的新手。我有时无法理解填充和边距。是否有某种聪明的方法可以使用 CSS 来直观地显示填充和边距。据我所知，边距没有背景颜色并且是透明的。例如，在下面的代码中，我想减少字段之间的垂直 space，以便表单更加紧凑。如果我只使用 HTML 我似乎没有问题，但是当我使用 widget_tweaks 时我会在行之间得到额外的 space 。

{% 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 %}

当我右键单击并检查元素时，我没有看到任何不为 0 像素的边距，而且填充似乎也为 0 像素。

那我错过了什么？如何减少行之间的白色 space？

Answer 1

Chrome 开发工具是你最好的朋友，按 F12，你会看到你所有的元素，select 你想看到的元素，你甚至可以实时更改填充以查看它是什么会看起来像。 Firefox 也有很棒的 css 开发工具

如何可视化 django 模板中的填充和边距并减少 bootstrap 中行之间的白色 space

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

html

css

django

django-widget-tweaks