Как уменьшить вертикальное пространство между элементами внутри гибкого контейнера? ⇐ Html

[Anonymous]

Я использую эту настройку в HTML

Код: Выделить всё

... the whole web page goes here

Где находится класс контента

Код: Выделить всё

.content {
background: lightgrey;
max-width: 660px;
margin: 0 auto;
display:flex;
flex-direction: column;
}

Итак, все элементы веб-страниц находятся внутри одного гибкого контейнера. Все, включая таблицы, другие элементы div и т. д.
Я основываю это на коде, который нашел здесь https://jsbin.com/fimoluqehi/edit?html,css,output
Единственная проблема заключается в том, что теперь я вижу большее вертикальное пространство между элементами внутри дочерних элементов гибкого контейнера.
Я сделал ниже два полных примера, один с flex, а другой без него. Видите ли, при добавлении flex добавляется больше вертикального пространства.
Я не знаю, что нужно, чтобы сохранить вертикальное пространство таким, как оно было раньше, но использовать flex. Я посмотрел аналогичный вопрос, но ответы там не помогли.
Пример без использования flex

Код: Выделить всё

table, th, td {
border: 1px solid black; /* Applies a 1px solid black border */
align-self: center;
border-collapse: collapse;
}

.content {
background: lightgrey;
max-width: 660px;
margin: 0 auto;
}







This h1 heading


This is h2 title


This is h3 title

[h4]
This is h4 title
[/h4]



Company
Contact
Country


Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste
Maria Anders Maria Anders Maria Anders
Germany Germany Germany Germany Germany


Centro comercial Moctezuma Centro comercial Moctezuma Centro comercial Moctezuma
Francisco Chang
Mexico

Выше приведен


Пример использования flex
Это тот же код, что и выше, но изменен .content для добавления гибкости, как показано здесь

Код: Выделить всё

.content {
background: lightgrey;
max-width: 660px;
margin: 0 auto;
display:flex;
flex-direction: column;
}

Теперь это выглядит так


Между элементами внутри гибкого контейнера больше вертикального пространства (больший зазор). Это становится более понятным, когда включено больше элементов. Например, вертикальное пространство между заголовками теперь больше.
Я использую последнюю версию браузера Brave для Linux.
Я пробовал много вариантов, таких как

Код: Выделить всё

 /*align-content: space-between;*/
/*align-items: flex-start;*/  /*does not help */
/*align-items: stretch;*/ /*does not help */
/*align-items: start;*/ /*does not help */
/*flex-grow:0;*/ /*does not help */
/*justify-content: flex-start;*/ /*does not help */

Но ничего не помогло.
Что мне нужно сделать, чтобы вертикальное пространство между элементами внутри гибкого контейнера оставалось таким же, как и раньше? Нужно ли изменять свойства CSS всех дочерних элементов гибкого контейнера, чтобы удалить лишний пробел? Надеюсь, нет.
Вот код скрипта, который стоит попробовать.

Код: Выделить всё

   table, th, td {
border: 1px solid black; /* Applies a 1px solid black border */
align-self: center;
border-collapse: collapse;
}

.content {
background: lightgrey;
max-width: 660px;
margin: 0 auto;
display:flex;
flex-direction: column;
}

Код: Выделить всё

This h1 heading


This is h2 title


This is h3 title

[h4]
This is h4 title
[/h4]



Company
Contact
Country


Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste
Maria Anders Maria Anders Maria Anders
Germany Germany Germany Germany Germany


Centro comercial Moctezuma Centro comercial Moctezuma Centro comercial Moctezuma
Francisco Chang
Mexico

Ссылка
отображение гибкого изображения, создающее дополнительное пространство, почему
https://developer.mozilla.org/en-US/doc ... _container

Подробнее здесь: https://stackoverflow.com/questions/798 ... -container