I use a CSS reset which zeros out the margin and padding of most-everything (it's an altered version of the Meyer reset), including of course block level text tags.
I'm trying to reinstate the text margins, but only on block level text tags that are followed by block level text tags.
Is there any way more manageable than the following to achieve this?
h1 + h1, h1 + h2, h1 + h3, h1 + h4,
h1 + ol, h1 + ul, h1 + p, h2 + h1,
h2 + h2, h2 + h3, h2 + h4, h2 + ol,
h2 + ul, h2 + p, h3 + h1, h3 + h2,
h3 + h3, h3 + h4, h3 + ol, h3 + ul,
h3 + p, h4 + h1, h4 + h2, h4 + h3,
h4 + h4, h4 + ol, h4 + ul, h4 + p,
ol + h1, ol + h2, ol + h3, ol + h4,
ol + ol, ol + ul, ol + p, ul + h1,
ul + h2, ul + h3, ul + h4, ul + ol,
ul + ul, ul + p, p + h1, p + h2,
p + h3, p + h4, p + ol, p + ul,
p + p{
margin-top: 0.5em;
}
I know this is incomplete (blockquote, etc.) but it paints the picture.
More complete version: This adds space between non-identical block level text elements; for example, it will add between h1 + p, but not h2 + h2 (note, I'm not using this specifically, but this is something I may resort to unless a better alternative surfaces)
(also note, I just realized this excludes some combinations like p + p. Just pretend they're in there)
h1 + h2, h1 + h3, h1 + h4, h1 + ol, h1 + ul, h1 + p,
h1 + dl, h1 + pre, h1 + blockquote, h1 + address, h2 + h1, h2 + h3,
h2 + h4, h2 + ol, h2 + ul, h2 + p, h2 + dl, h2 + pre,
h2 + blockquote, h2 + address, h3 + h1, h3 + h2, h3 + h4, h3 + ol,
h3 + ul, h3 + p, h3 + dl, h3 + pre, h3 + blockquote, h3 + address,
h4 + h1, h4 + h2, h4 + h3, h4 + ol, h4 + ul, h4 + p,
h4 + dl, h4 + pre, h4 + blockquote, h4 + address, ol + h1, ol + h2,
ol + h3, ol + h4, ol + ul, ol + p, ol + dl, ol + pre,
ol + blockquote, ol + address, ul + h1, ul + h2, ul + h3, ul + h4,
ul + ol, ul + p, ul + dl, ul + pre, ul + blockquote, ul + address,
p + h1, p + h2, p + h3, p + h4, p + ol, p + ul,
p + dl, p + pre, p + blockquote, p + address, dl + h1, dl + h2,
dl + h3, dl + h4, dl + ol, dl + ul, dl + p, dl + pre,
dl + blockquote, dl + address, pre + h1, pre + h2, pre + h3, pre + h4,
pre + ol, pre + ul, pre + p, pre + dl, pre + blockquote, pre + address,
blockquote + h1, blockquote + h2, blockquote + h3, blockquote + h4, blockquote + ol, blockquote + ul,
blockquote + p, blockquote + dl, blockquote + pre, blockquote + address, address + h1, address + h2,
address + h3, address + h4, address + ol, address + ul, address + p, address + dl,
address + pre, address + blockquote{
margin-top: 0.625em;
}
I think you might be overcoding here, that is, trying to anticipate every situation when many situations will never or seldom occur.
For instance, I think it highly unlikely that you will need to style
h1 + h1
as that should not appear in your code.
Same goes for many of the header to header combos.
Moreover, if you are doing this
h1 + p and p + h1 and h1 + h1 and p + p and all the other variations,
than you might as well do
h1, p { // }
My advice would be the same as @Pawel, just do
h1, h2, h3, h4, h5, h6, p, ul, ol //and others// {
margin-top: 0.5em;
}
If you must do it your suggested way, I would simplify as follows
h1 + ol, h1 + ul, h1 + p,
h2 + ol, h2 + ul, h2 + p,
h3 + ol, h3 + ul, h3 + p,
h4 + ol, h4 + ul, h4 + p{
margin-top: 0.5em;
}
...and then style other configurations only as need be.