Дополнительное пространство над текстом

Как удалить дополнительное поле над Джоном Джеральдом, чтобы оно соответствовало другим столбцам.

Это CSS, который у меня есть, я думаю, мне нужно сделать поля-верх: 0px Я хочу, чтобы имя Джон Джерард Ахерн или столбец 1 совпадали со столбцами 2 и 3.

 #datacontainer > p {


font-family: Verdana, Tahoma, sans-serif;panam103-test.syr.edu/victims.php


font-size: 1.81em;


color: rgb(12, 72, 118);


}


.widget-text a {


display: inline-block;


margin-left: 0.25em;


}


.widget-text img {


padding: 0.15em;


border: 0.06em solid #ccc;


}


/*Using columns to control how many cols needed*/


ul.list-unstyled.victims-list {


columns: 3;


column-gap: normal;


margin-top: 0px;


}


/*Mobile style is default (2 col for SM size and 3 for LG)*/


@media (max-width: 992px) {


ul.list-unstyled.victims-list {


columns: 2;


}


}


@media (max-width: 576px) {


ul.list-unstyled.victims-list {


columns: 1;


}


}

Код (разметка):

Я не работал с полями в элементах списка, иначе бы это заметил.

Когда вы прочитаете спецификации, вы увидите, что установка столбцов также устанавливает новый контекст форматирования блока.

Одним из последствий этого является то, что поля внутри контейнера (li) не проваливаются сквозь содержащий его блок (ul). В этом случае затрагиваются первый и последний элементы списка.

Остальные элементы одноуровневого списка сворачиваются друг с другом, поэтому между ними остается только поле шириной 12 пикселей.

Элементы верхнего списка во втором и третьем столбцах уже свернуты, поэтому между ними и содержащим блоком нет поля. @Soupi, у тебя есть работающее решение, но ты не знаешь, почему оно сработало.

Вот мое более общее решение:

 {padding-bottom: 12px;}

Код (разметка): поскольку многие разработчики и почти все дизайнеры обычно не понимают схлопывания полей, возможно, проще использовать отступы, хотя это само по себе создает проблемы.

  #victims-list li { margin: 0 0 12px; }

Код (разметка): gary

Я бы начал смотреть на тег h3, который у вас над списком. Попробуйте полностью удалить h3 и посмотрите, поможет ли это. Если список выровнен правильно, значит, вы нашли, в чем проблема. P.S. Вы также можете проверить свой сертификат SSL, поскольку он недействителен.

Я упомянул характеристики. Вот ссылка: https://www.w3.org/TR/css-multicol-1/

Я также заметил, что ваш список может разорваться внутри элемента списка. См. также раздел о разрывах столбцов в справочнике. г