html - CSS出现错误信息时给span元素添加padding

Question

在我的元素中，我有一个用户可以注册的表单。如果发生错误，我会将其从后端 (Django) 传递到前端。在 HTMl 中，我执行了一个 If 语句来查看错误是否已通过，如果是，我想将其显示在导致错误的字段下方。

我成功地将错误显示在错误来源的表单字段下方。我在 span 元素内显示错误。唯一的问题是我想在 span 元素本身的上方和下方添加一些空间。

我尝试这样做，但根本没有添加任何空间。

这是与此相关的代码:

<!-This is a flexbox container below->
<div class="flex-container">
 <form class="signupForm" autocomplete="off" method="POST">
                {% csrf_token %}
                {% if usernameError %}
                    <span style="color: #E77B04; position:relative; top: 62px; font-size: 15px; padding-bottom: 15px; padding-top: 15px;"> {{ usernameError }} </span>
                {% endif %}
                {% for field in form %}
                    {{ field }}
                    <br>
                {% endfor %}
                <button class="signupBtn" type="submit">Sign up</button>
</form>
</div>

浏览器显示代码:

 <form class="signupForm" autocomplete="off" method="POST">
                <input type="hidden" name="csrfmiddlewaretoken" value="#">

                    <span style="color: #E77B04; position:relative; top: 62px; font-size: 15px; padding-top: 15px;"> The username provided is not available </span>


                    <input type="text" name="username" value="edu333nir" placeholder="Username" class="usernameField" maxlength="255" minlength="4" required id="id_username">
                    <br>

                    <input type="email" name="email" value="edmundeded@edmdede.com" placeholder="Email" class="emailField" maxlength="255" minlength="2" required id="id_email">
                    <br>

                    <input type="password" name="password" placeholder="Password" class="passwordField" minlength="6" required id="id_password">
                    <br>

                    <input type="password" name="confirmPassword" placeholder="Confirm Password" class="confirmPassField" minlength="1" required id="id_confirmPassword">
                    <br>

                <button class="signupBtn" type="submit">Sign up</button>
            </form>

Answer 1

试试这个，我已将错误消息的条件呈现移动到呈现字段的循环内。现在对每个字段进行检查以检查错误消息是否为空 AND 字段名称是否为“用户名”，如果它们均为真，则在字段下方添加错误消息:

<!-This is a flexbox container below->
<div class="flex-container">
 <form class="signupForm" autocomplete="off" method="POST">
                {% csrf_token %}
                {% for field in form %}
                    {{ field }}
                    {% if usernameError and field.name == "username" %}
                    <span style="color: #E77B04; font-size: 15px; padding-bottom: 15px; padding-top: 15px;"> {{ usernameError }} </span>
                {% endif %}
                    <br>
                {% endfor %}
                <button class="signupBtn" type="submit">Sign up</button>
</form>
</div>