как у вас есть 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; 
}