Html 在输入之间手动添加表单错误

我在输入之间留了一些空间，因为我想在那里手动添加表单错误，但是错误消息下面会出现额外的空间。我试图使错误消息完全适合可用空间，而无需调整窗体大小。这是因为我应用了

填充底部：10px

上的code>，但我不确定如果不是这样我怎么能做到这一点。我尝试使用CSS网格代替表格，并设置

网格行间距：10px但结果相似。如何在不调整窗体大小的情况下使错误消息适合可用空间？错误消息的格式如下：

<ul class='errorlist'>
    <li>Please use another email, this one is already taken.</li>                       
</ul>

register.html

{% extends 'pages/base.html' %}

{% load static %}

{% block cssfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'accounts/css/register.css' %}">
{% endblock %}

{% block content %}
<div class="register-container">
    <div class="above-form">
        Create your account. It is free and only takes a minute.
    </div>
    <form action="." method="post">
        {% csrf_token %}
        <table>
            {{ form.non_field_errors }}
            <tr>
                <th>
                    <label for="{{ form.first_name.id_for_label }}">First Name:</label>
                </th>
                <td>
                   {{ form.first_name }}
                   {{ form.first_name.errors }}
                </td>
            </tr>
            <tr>
                <th>
                    <label for="{{ form.last_name.id_for_label }}">Last Name:</label>
                </th>
                <td>
                    {{ form.last_name }}
                    {{ form.last_name.errors }}
                </td>
            </tr>
            <tr>
                <th>
                    <label for="{{ form.email.id_for_label }}">Email:</label>
                </th>
                <td>
                    <div data-tip="we don't share your e-mail, it's for communication purposes only">
                        <span></span>
                        {{ form.email }}
                        {{ form.email.errors }}
                    </div>
                </td>
            </tr>
            <tr>
                <th>
                    <label for="{{ form.username.id_for_label }}">Username:</label>
                </th>
                <td>
                    {{ form.username }}
                    {{ form.username.errors }}
                </td>
            </tr>
            <tr>
                <th>
                    <label for="{{ form.password.id_for_label }}">Password:</label>
                </th>
                <td>
                    {{ form.password }}
                    {{ form.password.errors }}
                </td>
            </tr>
            <tr>
                <th>
                    <label for="{{ form.password2.id_for_label }}">Repeat Password:</label>
                </th>
                <td>
                    {{ form.password2 }}
                    {{ form.password2.errors }}
                </td>
            </tr>
        </table>
        <button type="submit" class="button-register-now">Register Now</button>
    </form>
</div>
{% endblock %}


{% extends 'pages/base.html' %}

{% load static %}

{% block cssfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'accounts/css/register.css' %}">
{% endblock %}

{% block content %}
<div class="register-container">
    <div class="above-form">
        Create your account. It is free and only takes a minute.
    </div>
    <form action="." method="post">
        {% csrf_token %}
        <table>
            {{ form.non_field_errors }}
            <tr>
                <th>
                    <label for="{{ form.first_name.id_for_label }}">First Name:</label>
                </th>
                <td>
                   {{ form.first_name }}
                   {{ form.first_name.errors }}
                </td>
            </tr>
            <tr>
                <th>
                    <label for="{{ form.last_name.id_for_label }}">Last Name:</label>
                </th>
                <td>
                    {{ form.last_name }}
                    {{ form.last_name.errors }}
                </td>
            </tr>
            <tr>
                <th>
                    <label for="{{ form.email.id_for_label }}">Email:</label>
                </th>
                <td>
                    <div data-tip="we don't share your e-mail, it's for communication purposes only">
                        <span></span>
                        {{ form.email }}
                        {{ form.email.errors }}
                    </div>
                </td>
            </tr>
            <tr>
                <th>
                    <label for="{{ form.username.id_for_label }}">Username:</label>
                </th>
                <td>
                    {{ form.username }}
                    {{ form.username.errors }}
                </td>
            </tr>
            <tr>
                <th>
                    <label for="{{ form.password.id_for_label }}">Password:</label>
                </th>
                <td>
                    {{ form.password }}
                    {{ form.password.errors }}
                </td>
            </tr>
            <tr>
                <th>
                    <label for="{{ form.password2.id_for_label }}">Repeat Password:</label>
                </th>
                <td>
                    {{ form.password2 }}
                    {{ form.password2.errors }}
                </td>
            </tr>
        </table>
        <button type="submit" class="button-register-now">Register Now</button>
    </form>
</div>
{% endblock %}

.content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: auto;
    margin-top: 15px;
    width: 960px;
}

.content form {
    background-color: #f5f3f2;
    box-shadow: 0 8px 6px -6px black;
    width: 100%;
 }

.content form label {
    display: block;
    text-align: right;
    margin-left: 30px;
}

.content form input {
    margin-left: 15px;
    width: 100%;
}

.errorlist {
    margin-top: 0px;
    margin-bottom: 0px;
}

.errorlist li {
    font-size: 10px;
    margin-left: 15px;
    margin-top: 0px;
    margin-bottom: 0px;
}

td {
    padding-bottom: 10px;
}

#id_first_name {
    margin-top: 20px;
}

.register-cointainer {
    width: 900px;
}

.button-register-now {
    border-style: solid;
    border-radius: 0.5em;
    background-color: #FF9900;
    color: white;
    margin-left: 168px;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
}

.button-register-now:hover {
    background-color: #FF6600;
    color: white;
    text-decoration: none;
}

[data-tip] {
    position: relative;

}

[data-tip]::before {
    content: '';
    display: none;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid white;
    position: absolute;
    top: -10px;
    left: 30px;
    z-index: 10;
    font-size: 1em;
    line-height: 2em;
    width: 0;
    height: 0;
}

[data-tip] > span {
    display: none;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 16px solid #777;
    position: absolute;
    top: -9px;
    left: 29px;
    z-index: 7;
    font-size: 1em;
    line-height: 2em;
    width: 0;
    height: 0;

}

[data-tip]::after {
    display: none;
    content: attr(data-tip);
    position: absolute;
    top: -54px;
    left: 15px;
    border: 1px solid #777;
    padding: 0 20px;
    background-color: white;
    color: #777;
    z-index: 9;
    font-size: 0.75em;
    height: 4em;
    text-align: center;
    line-height: 4em;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: normal;
}

[data-tip]:focus-within > span,
[data-tip]:focus-within::before,
[data-tip]:focus-within::after {
    opacity: 1;
    display: block;
}