Margin to 0 on first and last element in wrapper

[steveooo]

Hi,

Well, I am looking for a better alternative to this:

#box>:first-child { margin-top : 0 }

#box>:last-child { margin-bottom : 0 }

[#box = wrapper with content]

[TheDoc]

Perhaps you’re looking at it wrong? Seems like you can ignore the content inside the wrapper and just adjust your padding on the wrapper itself.

[steveooo]

Well, the alternative of changing padding of the #box instead of adjusting the elements (in #box) was my first idea. But it doesn’t look very well, if you give #box a background.

[TheDoc]

Perhaps if you showed a link of what you’re trying to accomplish?

[steveooo]

#box is the content wrapper with e.g. a white background whereas the body background is e.g. light blue. So with two different backgrounds you will see the padding of the #box, so your (and my first thought) alternative isn’t suitable for that way.

I am looking for an alternative where you don’t change the padding (of #box) for replacing the function of

#box>:first-child { margin-top : 0 }

#box>:last-child { margin-bottom : 0 }

[TheDoc]

Sorry, I just can’t envision what you’re trying to do. In my head, the padding would work perfectly. If you have a screenshot of what you’d like to do, or a link to it, that’d be great.

[steveooo]

Well, here are two screenshots:

1. How it should look like:
http://cl.ly/0H1V2E3v3F3z2v0I2p0i

2. How it looks without my code (from above):
http://cl.ly/2l1m1Z0v1i2J3q2w081T

I think this gives you all informations you need.

[TheDoc]

Why don’t you just do:

#box h1 { margin-top: 0; }

[steveooo]

Because I want it flexible and the content don’t always start with a headline-tag.

[TheDoc]

Well, content should always start with an h1 tag, but I suppose that’s an argument for another day.

My suggestion is this: #box h1 { margin-top: 0; }

If anyone else wants to put their two cents in, by all means.

[steveooo]

Well, my solution is not bad. But I don’t like using the universal selector * ;)

[Author]

Posts