Normalize perceived padding on an element with unknown children

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:

enter image description here

...but we want to normalize the "padding" of the box so that it appears equal on all sides:

enter image description here

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

score 1 · Accepted Answer · edited May 23 '17 at 12:30

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.

The hitch is, this is coming from a WYSIWYG where I can't expect the poor folks to add CSS classes, they just highlight the text and click "make it a box". I think you are probably right - there's no easy way to do it. I will probably add a `.last-child` class with js, but it won't show up in the WYSIWYG unfortunately... Can't wait to be rid of IE8. Will probably accept this answer - I don't have high hopes for another solution, thanks. — Wesley Murch, Oct 21 '11 at 08:29

score 0 · Answer 2 · answered Oct 21 '11 at 08:14

0

I would probably compensate the extra space by having padding or margin in both top and bottom.

http://jsfiddle.net/lollero/yuXcH/2/

Also some padding change in top and/or bottom of the parent element can be used.

http://jsfiddle.net/lollero/yuXcH/3/

answered Oct 21 '11 at 08:14

Joonas

7,227
9
40
65

#1 is not an option because firstly - the output is different, and I'd have to select `.box p, .box ul, .box ol, .box blockquote {}` etc. to change it, otherwise it will affect *all* the elements and make for poor typography on the rest of the page. #2 will not work because it doesn't normalize the bottom padding, it defers it to the last child which means it could still be any value including `0`. – Wesley Murch Oct 21 '11 at 08:22
@WesleyMurch I have no idea what you want. – Joonas Oct 21 '11 at 08:24

Normalize perceived padding on an element with unknown children

2 Answers2