Nested Divs Spaced Evenly

Get Child Divs to Align Vertically with Spacing

You may find yourself having to align fixed-height divs that are nested within a parent div. For example, you might have images that need equal spacing at the top and the bottom. In order to do this, set a margin-bottom on all of the child divs (B, C, D) within the the parent div (A).

Then set a margin-top for the first child (B). The first nested div is given an id and the css pseudo class of :first-child is applied. The reason I did it this way, instead of using margin-top on all the child divs with :last-child psuedo class on the last child div, is because the :first-child is supported in more older browsers.

Demo