Question

I have a <div> styled like a box:

.box {
    border:2px solid #ccc;
    background:#eee;   
    padding:1em;
    margin:1em;
}

In this box, there could be any number of any type of child elements in any order:

<div class="box">
    <h3>Howzit goin</h3>
    <p>Here comes a list:</p>
    <ul>
        <li>I don't know what</li>
        <li>this box will contain</li>
        <li>but it could be anything</li>
    </ul>
</div>

Most or all of the child elements inherit bottom margin of various lengths from the base typography stylesheet:

/* Example global typography */
p {margin:0 0 1.5em;}
ul {margin:0 0 2.5em;}

Which produces output like this:

…but we want to normalize the “padding” of the box so that it appears equal on all sides:

• .box :last-child would be too easy, this has to work in at least IE8 as well as
  modern browsers (but it could be used in conjunction with an IE-only method).
• I don’t want to use extra markup or javascript.

Is there any other CSS trick I can use to get the output I want?

Fiddle: http://jsfiddle.net/yuXcH/1/

Answer 1

As you can read in this question, even if it’s about 2 years old, there’s no “easy” way to do this in IE8 (the other thread is just about IE6/7, but things haven’t changed – IE8 doesn’t support :last-child either).

The best way, in my opinion, is to manually add a class last-child to your last child so you can do:

.box .last-child{ margin-bottom: 0; }

The alternative is using javascript, which is easier if you have a lot of boxes. With jQuery, it would just look like this:

$(function(){
  $(".box :last-child").css("margin-bottom","0");
})

The only “pure CSS” solution I can think of is changing all of your padding/margins to always result in a box with same padding on all sides like Lollero suggested, but this will, compared to your previous solution, result in different margins between the elements inside of the box.