1

这是我的代码：

div {
  border: thin solid gray;
  display: inline-block;
}
h1 {
  background: lightblue;
}
span {
  background: orange;
}
.b h1 {
  line-height: 1.2em;
}
.c span {
  font-size: 0.5em;
}
.d h1 {
  line-height: 1.2em;
}
.d span {
  font-size: 0.5em;
}
<div class="a"><h1>Foo<span>Bar</span></h2></div>
<div class="b"><h1>Foo<span>Bar</span></h2></div>
<div class="c"><h1>Foo<span>Bar</span></h2></div>
<div class="d"><h1>Foo<span>Bar</span></h2></div>

有四个divs。每个div都有一个h1和一个span嵌套在h1. 只有line-height和font-size样式与此问题相关。其他样式仅用于可视化问题。这里是重点，

  1. div.a是一个普通的div。这里没有line-heightor的样式font-size。
  2. div.b只有款式h1才有line-height: 1.2。
  3. div.c只有款式span才有font-size: small。
  4. div.dh1拥有line-height: 1.2和span拥有的风格font-size: small。

为什么标题div.d的高度比其他标题高？

4

0 回答 0