how do you have css padding around a multiline div

Question

i have the following css to put padding around a div:

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

it works great until the content (which happens to be inside a cell in an html table takes up two lines. When i look at this in firefox, it looks like its trying to add the padding to each line of the content (even though its all inside one div) so i get some weird overlap of space above the second line that covers part of the first line.

Is there a workaround for this issue or another solution that doesn't break on multiline.

Answer 1

It is adding this padding because you have included both the .orangeAllday and .orangeAll Day a together, so both the link & the elemenent .orangeAllday will get padding of 5px.

You would need to separate them like so:

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

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

this is done with the assumption that you want padding on the .orangeAllDay element only, but wish to retain background / color for link a.

Answer 2

You've got the padding around the div (.orangeAllDay) and the link. What you are seeing is the padding of the link. There are several ways around this, depending on how exactly the HTML looks like.

If it only contains the link, I'd suggest to actually drop the div and just have the link display as a block:

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

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