変更前、このように1ページでマークアップを変更しました
<div class="header-wrapper header">
<h1 wicket:id="headerTitle" class="dealer-name">Excellence Holden</h1>
</div>
変更後
<h1 class="header-wrapper header">
<span wicket:id="headerTitle" class="dealer-name">Excellence Holden</span>
</h1>
マークアップを変更した後、"Excellence Holden" のフォント サイズが大きくなっています。
CSS コード:
.header-wrapper {
padding:15px 0;
}
.header-wrapper .dealer-name {
text-align: center;
font-size: 1.3em;
}
それはあなたのスタイリングのせいです。このように HTML を変更する場合は、それに応じてスタイルも変更されるようにする必要があります。
例えば：
div.header { font-weight:bold; }
div.header h1 { font-size:24px; }
上記の CSS は最初の HTML スニペットに適用されますが、2 番目のスニペットには適用されません。これを次のように変更する必要があります。
h1.header { font-weight:bold; }
h1.header span { font-size:24px; }
h1また、これに影響を与える可能性のある他のスタイルやスタイルがないことも確認してspanください。
それはCSS関連だと思いますが、
通常、新しい CSS ファイルには、タグのフォント ( Size、Family、weight) プロパティが含まれています。<h1>
h1とspanCSS 属性の両方を確認してください。ブラウザーのインスペクター (Chrome Inspect Element) を使用して、実際の属性を確認できます。
変更後、内部要素 に設定されたフォント サイズは、1.3emその意味を変更します。その理由は、font-size要素の値で使用される場合、em単位は親要素のフォント サイズを示すためです。ここで、親要素はh1要素であり、一般的で推奨されるブラウザーの既定値は、そのh1要素のフォント サイズが2em、つまり親のフォント サイズの 2 倍です。
この効果をオーバーライドするには、次を追加します。
h1.header-wrapper { font-size: 1em; }
css でスパンのフォント サイズを変更し、h1 に定義されているフォントを見つけて、同じフォントをタグに適用する必要があります。
h1 をリセットしないfont-sizeと、自動的に通常よりも高くなるためです。