Question

I want to create a box with consistent spacing on all sides, regardless of the content.

Unfortunately, elements have margins which cause issues when the box is given padding. This is expected because the element’s margin doesn’t ‘flow’ out of the box over padding. A demo is at http://jsfiddle.net/cZf7E/1/

Up to now I’ve had special style rules for anything in the box which is at the top (with margin-top: 0) and bottom (with margin-bottom: 0). For the top it’s not bad, but at the bottom there’s a lot of potential tags to style.

Is there a way to do this that’s not so hacky?

Answer 1

How about

aside :first-child {
    margin-top: 0;
}
​aside :last-child {
    margin-bottom: 0;
}​

First/ last element can be any kind of element (h1, h2, …, p, div, span)

DEMO

Note that there is a space between aside and first-child/ last-child. Without it, the styling would apply to the first/ last aside.

---

If there will be more levels in the aside and propagation further down is not desirable, it is better to use

aside > :first-child {
    margin-top: 0;
}
​aside > :last-child {
    margin-bottom: 0;
}​

in order to select just the direct children of the aside.

Propagation vs. no propagation demo (of course, margin won’t apply to inline elements such as span, em, or strong – it was just to show how propagation works.)

---

Support: As Ben Dyer has pointed out, last-child is a CSS3 pseudo-class. It is not supported by IE8 or older. Also, first-child is buggy in IE8 and 7.