Текстовые теги уровня блока;интеллектуальные поля CSS

Question

Я использую сброс CSS, который обнуляет поля и отступы most -все ( это измененная версия Meyer reset ), включая текстовые теги уровня блока курса.

Я пытаюсь восстановить текстовые поля, но только для текстовых тегов уровня блока, за которыми следуют текстовые теги уровня блока.

Есть ли способ сделать это более управляемым, чем следующие?

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;
}

Я знаю, что это неполно (blockquote и т. Д. ), но это рисует картину.

---

Более полная версия: это добавляет пробел между неидентичными текстовыми элементами уровня блока; например, он будет добавляться между h1 + p, но не h2 + h2 ( обратите внимание, я не использую это специально, но к этому я могу прибегнуть, если только нет лучшей альтернативной поверхности )
_{( также обратите внимание, я только что понял, что это исключает некоторые комбинации, такие как p + p. Просто представьте, что они там )}

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;
}

Answer 1

Хотя это не идеальное решение, HTML5 Boilerplate содержит сброс CSS с именем normalize.css , который пытается сохранить базовые стили.

Это не совсем то, что вы ищете, но может дать вам некоторые идеи.

Кроме того, в зависимости от того, как вы работаете, что-то вроде МЕНЬШЕ может сделать управление вашим CSS более легким.

Answer 2

Я думаю, что вы можете здесь перекодировать, то есть пытаться предвидеть каждую ситуацию, когда много ситуаций никогда не произойдет или случится редко.

Например, я думаю, что маловероятно, что вам нужно будет стилизовать

h1 + h1

так как не должно появляться в вашем коде .

То же самое относится ко многим комбинациям заголовков и заголовков.

Более того, если вы делаете это

h1 + p и p + h1 и h1 + h1 и p + p и все другие варианты

чем вы могли бы сделать

h1, p { // }

Мой совет будет таким же, как @ Pawel , просто сделайте

h1, h2, h3, h4, h5, h6, p, ul, ol //and others// {
    margin-top: 0.5em;
}

Если вы должны сделать это предложенным способом, я бы упростил следующее

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;
} 

... а затем стилизуйте другие конфигурации только по мере необходимости.

Answer 3

Вы видели http://meyerweb.com/eric/tools/css/reset/?

Это то, что вы хотели?

РЕДАКТИРОВАТЬ: (как насчет)

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