相关疑难解决方法(0)

为什么在下面的代码中高度div大于img？图像下方有一个间隙,但它似乎不是填充/边距.

图像下方的间隙或额外空间是多少？

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}

<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

我感到困惑line-height的inline元素.我一直在寻找:

• http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced
• http://www.w3.org/wiki/CSS/Properties/line-height
• https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

但我不确定我是否理解.我知道如果我使用display:inline-block转换为块,我可以使高度准确.但我试图理解的是行高内联元素的工作原理.以下是问题:

• 我有一个文本,font-size: 15px但如果我看到浏览器的开发人员工具,它会18px.为什么？在font-size刚刚aproximate？或者它不衡量跌宕起伏？

• 为什么背景色inline元素不具有相同的height比line-height？的line-height在inline元件测量线箱的空间,即空间的上方和下方的线,而不是inline元素本身.这是解释吗？

这是一个可以玩的例子.

CSS:

#block-element {
  font-family: 'verdana', sans-serif;
  font-size: 15px;
  line-height: 15px;
  text-decoration: none;
  color: black;
  margin: 0;
  background-color: grey;
}
#inline-element {
  -webkit-box-sizing: border-box;
  font-family: 'verdana', sans-serif;
  font-size: 15px;
  line-height: 15px;
  text-decoration: none;
  color: black;
  margin: 0;
  background-color: green;
}

<div id="block-element">
  <a id="inline-element" href="#">
    inline element font-size:15px but height:18px …

这里有一个类似的问题,其答案实质上是:

高度 - 特别是从上升者的顶部(例如,'h'或'l'(el))到下降者的底部(例如,'g'或'y')

这也是我的经验.即14px Arial中字母的高度K(基线高度)约为10px.

规范没有说明计算的字体大小,所以我猜这是浏览器特定的,但我找不到任何引用它.

(此处和此处的其他问题大致相同,但遗憾的是没有答案给出令人满意的解释..)

是否有任何文件说明为什么字体大小似乎是"从上升到下降"的大小？

因此，link和link给出了字体如何依赖于实现的提示。在以下情况下，此问题非常特定于字体大小：

字体大小：50px；将需要额外的空间来渲染（在我的情况下为 60px）

div {
  height: 50px;
  font-size: 50px;
  background: green;
}

span {
  background: red;
}

.lineheight {
  line-height: 50px;
}

<p>Green is 50px, Red is not</p>
<div><span>fg</span></div>

<p>You can still see the overflow without span:</p>
<div>jAaMgÁ</div>

<p>line-height does not solve the issue (just makes it prettier)</p>
<div class="lineheight"><span>jAaMgÁ</span></div>

• 我期望发生的是：em 正方形内的上升和下降
• 我得到的是：下降器被绘制在 em 广场之外。
• 来自文档链接：“字体大小对应于 em 方格”
• 从这个参考 em 正方形应该包括下降和上升：

那么为什么浏览器会做其他事情呢？我尝试了 Firefox 和 Chrome，两者似乎都与这种（错过？）行为一致……规范是否发生了变化？如果是这样，告诉浏览器字体高度（包括下行和上行）的适当方法是什么？

（宽度可以忽略，你可以自由使用CSS4，但感谢CSS3）