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

  • Автор темы ametior
  • 58
  • Обновлено
  • 18, May 2024
  • #1
Как удалить дополнительное поле над Джоном Джеральдом, чтобы оно соответствовало другим столбцам.

Это 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;

}

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

ametior


Рег
02 Nov, 2012

Тем
1

Постов
2

Баллов
12
  • 21, May 2024
  • #2
Я не работал с полями в элементах списка, иначе бы это заметил.

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

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

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

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

Вот мое более общее решение:
 {padding-bottom: 12px;}
Код (разметка): поскольку многие разработчики и почти все дизайнеры обычно не понимают схлопывания полей, возможно, проще использовать отступы, хотя это само по себе создает проблемы.
  #victims-list li { margin: 0 0 12px; }
Код (разметка): gary
 

Alex_Popov1


Рег
10 Mar, 2016

Тем
0

Постов
1

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

SuperMedia_RU


Рег
01 Jan, 2011

Тем
1

Постов
3

Баллов
13
  • 15, Jun 2024
  • #4
Я упомянул характеристики. Вот ссылка: https://www.w3.org/TR/css-multicol-1/

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

Мария1870


Рег
09 Dec, 2012

Тем
1

Постов
3

Баллов
13