На 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.