css - 前のテキストの前後に要素を表示しますか?

Question

これを考えると：

<h1>This is a test <small>It is</small></h1>

<small>「これは...」の前に、前の行に表示されるように適用できるCSSはありますか？float:left; display:block;コンテンツの前に取得しません。

Answer 1

このような比較的単純なケースでは、ポジショニングを使用できます。見出しを相対配置として宣言し、適切な上部パディングを設定し、small要素を「絶対」配置にします (つまり、配置された先祖である見出しに対して相対的に配置します)。例：

h1 { position: relative; padding-top: 1em; }
h1 small { position: absolute; top: 0; left: 0; height: 1.3em; }

パディングを設定する場合emは、要素のフォント サイズを示しますh1が、内側の要素の高さを宣言する場合、small要素emはそのフォント サイズを示しますが、これは小さいことに注意してください。したがって1emvs. 1.3em、たとえパディングがsmall要素のための余地を与えることを意図しているとしても。フォント サイズをh1およびsmall(たとえばh1 { font-size: 150% } small { font-size: 80% }) に設定して、より予測可能なレンダリングを取得し、paddingおよびのheight値を試して、好みの外観を取得することをお勧めします。このチューニングは、フォントにも依存します。