Question

I have two sibling divs sitting below each other, both contained in the same parent div.

The requirement is that the divs need a certain amount of space between them, let’s say 20px, but the space beween the inner divs and the parent div needs to be the same on all sides (top, right, bottom, left), in this case 0px.

The constraint here is that the inner divs need to have the exact same markup, so I can’t apply a different or additional class to just one of them. Also I can’t add any markup between the child divs or only above or below one of the child divs.

What would be a good way to solve this problem with CSS (no javascript), in a cross-browser compatible way?

Thanks!

Answer 1

#parentdiv div {
    margin-top: 20px;
}

#parentdiv div:first-child {
    margin-top: 0;
}

should do it. Alternatively, you could try

#parentdiv div + div {
    margin-top: 20px;
}

Which solution to use depends on browers’ support of either the :first-child pseudo-class, or the + adjacent selector. Any modern browser (thus, discounting IE6) should support both.