html层次结构更改

Question

我在这样的一个页面中更改了标记， 在改变之前

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

Answer 1

您需要在css中更改跨度的字体大小，找到为h1定义的字体，然后将相同的字体应用于标记

Answer 2

因为如果你没有为h1重置font-size，它会自动高于正常值。

Answer 3

我想说这是一个CSS相关的，

通常新的CSS文件包含Size标记的字体（Family，weight，<h1>）属性。

请检查h1和span CSS属性。您可以使用浏览器检查器（Chrome Inspect Element）查看实际属性。

Answer 4

这是因为你的造型。当像这样更改HTML时，您需要确保样式也相应地更改。

例如：

div.header { font-weight:bold; }
div.header h1 { font-size:24px; }

上述CSS将应用于第一个HTML代码段，但不适用于第二个HTML代码段。您必须将其更改为：

h1.header { font-weight:bold; }
h1.header span { font-size:24px; }

并确保没有可能影响此内容的其他h1或span样式。

Answer 5

更改后，内部元素1.3em上设置的字体大小会改变其含义。原因是当在font-size元素的值中使用时，em单位表示父元素的字体大小。这里的父元素是h1元素，常见和推荐的浏览器默认值是h1元素的字体大小为2em，即父元素字体大小的两倍。

要覆盖此效果，请添加以下内容：

h1.header-wrapper { font-size: 1em; }