鼠标选中的真的是行内盒的内容区吗?这种情况该如何解释?

新手上路,请多包涵

行内级盒模型真的不比块级盒模型。。。

最近几天在搜各种博客,然后自己想总结出行内级盒模型所有的知识点

比如昨天写demo的时候给span设置font-size:50px,为何谷歌渲染结果却为65.6px?

查阅得知受字体字号的影响,字体设计有em-square比作用来盛放字符的金属容器,然后字体的各种度量如ascender升部、descender降部等等...

我的谷歌默认字体是微软雅黑

所以50 x (2703/2048) ≈ 65.6

而很多博客把鼠标选中的区域为行内级盒参与行内格式化生成的行内盒的内容区

确实是,然而在测试块级盒子的line-height指定了该容器内行盒的最小高度时

#container{  
   background-color: rgb(200, 200, 200);  
} 
#strut{    
   background-color: pink;    
}
#text{    
   font-size:12px;    
   background-color: pink;    
}  

<body>
  <div id='container'>   
    <span id='strut'>x</span>   
    <span id='text'>text</span>   
  </div>
</body>

内容区加了背景颜色

对于块容器而言,容器的高度是由行盒撑开的

验证了此时行盒的高度的line-height:normal * 16px = 21.12 = div的高度

但是当我用鼠标选中第而个span时:

不是说鼠标选中的是内容区吗?这个span的内容区是粉色背景区域啊

想不通为何这样,望各位不吝赐教,拜谢!

阅读 871
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题