как у вас заполнение CSS вокруг многострочного div

Question

У меня есть следующий CSS, чтобы поместить отступ вокруг div:

.orangeAllDay, .orangeAllDay a {
    background: #fab384 !important;
    color: white;
    padding: 5px;
}

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

Есть ли обходной путь для этой проблемы или другого решения, которое не ломается на мультилинии.

Answer 1

Он добавляет этот отступ, потому что вы включили вместе и .orangeAllday, и .orangeAll Day a, поэтому и ссылка, и элемент .orangeAllday получат заполнение 5px.

Вам нужно разделить их следующим образом:

.orangeAllDay {
    background: #fab384 !important;
    color: white;
    padding: 5px;
}

.orangeAllDay a {
    background: #fab384 !important;
    color: white;
}

это делается при условии, что вы хотите заполнить только элемент .orangeAllDay, но хотите сохранить фон / цвет для ссылки a.

Answer 2

У вас есть отступ вокруг div (.orangeAllDay) и ссылки. То, что вы видите, это заполнение ссылки. Есть несколько способов обойти это, в зависимости от того, как именно выглядит HTML.

Если бы он содержал только ссылку, я бы предложил на самом деле удалить div и просто отобразить ссылку как блок:

<a href="..." class="orangeAllDay">...</a>

a.orangeAllDay {
    background: #fab384 !important;
    color: white;
    padding: 5px;
    display: block;
}