CSS positioning (margin / padding) with markup constraint_问答_开发者

CSS positioning (margin / padding) with markup constraint

开发者 https://www.devze.com 2023-01-11 23:35 出处：网络

I have two sibling divs sitting below each other, both contained in the s开发者_如何学Came 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!

#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.

you could insert another div inbetween them and make its height 20px? or is putting the first inner div into a new div and then making the new divs bottom margin 20px an acceptable solution?

As others have already stated, you cannot use a pure CSS approach that will work in IE6. However, why not use a minified, basic jQuery framework - without the ui it will be tiny - and then you can call the first child and apply the margin to that:

$("#parentdiv:first").css({ marginTop: 0 })

That way you'd have already applied the margin-top:20px; in your css, now you're removing it from the first child only. I know you said you did not want a javascript approach, but you're not left with much choice, unless you're willing to re-engineer ie6 and resurrect him for us?

Hope this helps someone somewhere.

Two divs sitting below each other? Do you mean they're stacked vertically, one on top of the other? Margin-top would do it as long as you don't have padding on the parent div.

Try this example.

<html>
<head>
<style>
div.parent {
    background-color: #AAA;
}
div.child {
    background-color: #CCC;
    margin-top: 20px;
}
</style>
</head>
<body>
<div class="parent">
    <div class="child">&nbsp;</div>
    <div class="child">&nbsp;</div>
</div>
</body>
</html>

You'll notice that as long as there's nothing inside the parent above the first child its margins won't extend the parent div.

If they're side-by-side and floating that's a different story, margin-left doesn't work the same as margin-top. You might be able to use margin-right on both divs but fix the width of the parent and set overflow to hidden in order to chop off the extended margin - but I'm not sure about compatibility on that kind of thing.

Are you absolutely certain you've got no way to distinguish the two divs? Finding a way around that constraint might do a lot to help you.