見出しと最初のリスト項目の間でページ区切りを避ける

Question

私はHTML文書を持っていますが、見出しの直後に改行が印刷されないようにしたいと思います。理想的な世界では

、これは.heading {page-break-after: avoid;}を設定するのと同じくらい簡単だろうが、ほとんどのブラウザでは唯一page-break-inside: avoid、page-break-after: avoid（またはpage-break-before: avoid）をサポートしていません。

pのようなスタンドアロンの要素が私の見出しに続くとき、<div class="nobreak">に見出しと段落を囲み、.nobreak要素の改ページを避けることができます。

しかし、時には、長いリストが見出しを次の：

<h1>A list of things</h1> 
<ol> 
    <li>This is the first thing.</li> 
    <li>This is the next thing.</li> 
    ... 
    <li>Many things later, we reach the end.</li> 
</ol> 

私はdiv.nobreakでh1とol両方をラップすることができますが、これはあまりにも厳格である：それはどんな時に発生する改ページを防ぎます私が心配しているのは、最初のliの直前のブレークを防ぐことです。

明白な理由（olタグの存在）のために、h1と最初のliを周囲の要素にラップすることはできません。

ここで希望の効果を達成するためのアイデアはありますか？

Answer 1

<style> 
h1 { margin-bottom: 0; padding-bottom:0;} 
ol, li:first-child { margin-top: 0; padding-top: 0; } 
</style> 

サブクラスli:first-childを使用すると、リスト内の最初の要素だけをスタイルすることができます。

ラッピング要素の間に余白や余白がないことを確認してください。