开发者

Block level text tags; intelligent CSS margins

开发者 https://www.devze.com 2023-03-30 07:11 出处:网络
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 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,开发者_StackOverflow社区
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.


While not the ideal solution, the HTML5 Boilerplate contains a CSS reset called normalize.css that attempts to keep basic styling.

It's not exactly what you're after, but might give you some ideas.

Additionally, depending on the way you're doing things, something like LESS might make managing your CSS while you develop this a little easier.


Have you seen http://meyerweb.com/eric/tools/css/reset/ ?

Is this what you wanted?

EDIT: (how about)

h1, h2, h3, h4, h5, h6, p, blockquote,
 form, label, ul, ol, dl, fieldset, address {
    margin-top: 1.5em;
}
0

精彩评论

暂无评论...
验证码 换一张
取 消