На Raw HTML сайт выглядит так, как я задумал. Но на Django во время цикла for создается пустое пространство.

<div id="Project" class="bg-white fnt-white brdr project-div ">
        <div class="float-left image-for-project-container brdr">
            <img src="{% static './Images/manworking.webp' %}" alt="manworking"  height="630px">
        </div>

        
        {% for project in project_details %}
        <div class=" project-container inline-block ">
            <h2 class="text-center fnt-black head-portfolio">
                {{project.project_name}}
            </h2>
            <br>
            <br>
            <p class="margin-auto txt-portfolio roboto hover-orange fnt-black">
                {{project.project_details}}
            </p>
            <br>
            <a href="#" class="buttons read-more fnt-black">Read More</a>
            
        </div>
{% endfor %}
        
        
    </div>

Проблема: Контейнер проекта при получении динамических записей из модели Django создает несколько контейнеров проекта в соответствии с выполнением цикла forloop. Однако, как видно из приложенного изображения, при создании каждого контейнера проекта последовательно создается нежелательный отступ или поле вверх. Что я делаю не так?

Это HTML-код. Я не думаю, что есть какие-либо требования к моей таблице стилей CSS, так как когда я просматриваю HTML файл без Django, он абсолютно в порядке. Я также приложил изображение, чтобы показать пространство, которое создается. В случае, если Imgur не отображается, вот ссылка (https://i.stack.imgur.com/EnUUG.png).

Вертикальное выравнивание блокаInline установлено по базовой линии текста, поэтому нижний текст, ссылки 'Читать далее' выравниваются. Чтобы выровнять их по верху, нужно установить vertical-align:top для класса project-container.

Вернуться на верх