css - 请教关于display：inline-block，line-height，font-size的一些问题
本文介绍了css - 请教关于display：inline-block，line-height，font-size的一些问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
简述：一个外层div 设有行高 字体尺寸
包含两个span子元素 设为 display: inline-block; 各自分别设有不同字体大小
由于display: inline-block;有空白用font-size：0去除，同时由于两个子元素未应用vertical-align来对齐,外层div高度加大. 但当外层font-size 设置0以外的值，外层高度div虽然也变大 但是要比设置font-size：0的时候小 这是什么原因
代码如下：
<html><head>
<style>
*{
margin:0;padding:0;
}
span{
display:inline-block;
}
</style>
</head><body>
<div style="color:#00FF00;line-height:40px;font-size: 12px;display: inline-block;">
<span style=" font-size: 18px;">This is a header</span>
<span style="font-size: 28px;">This is a paragraph.</span>
</div>
</body></html>第二个问题 外层div 设为 display: inline-block; 再加一个除了font-size：0其他相同的div 里面子元素span设有vertical-align：middle; 为什么外层的父元素div会向下偏移 不对齐原来那个div
到底font-size 对行高 高度的影响是怎么样的包括对子元素span的影响。
<html><head>
<style>
*{
margin:0;padding:0;
}
span{
display:inline-block;
}
</style>
</head><body>
<div style="color:#00FF00;line-height:40px;font-size: 12px;display: inline-block;">
<span style="font-size: 18px">This is a header</span>
<span style="font-size: 28px;">This is</span>
</div>
<div style="color:#00FF00;line-height:40px;font-size: 0px;display: inline-block;">
<span style=" font-size: 18px;">This is a header</span>
<span style="font-size: 28px;">This is</span>
</div>
</body></html>可能描述有些不清楚，不明白可以继续说明，谢谢
解决方案
实在抱歉看了半天没看懂你的问题。。
可是这个代码写的。。看起来很难受啊。。
行内样式为什么要换行。。
font-size不都是12px、14px这种字号的吗。。怎么会用到13px。。
原谅我的吐槽，可以的话，重新描述下你的问题。。
这篇关于css - 请教关于display：inline-block，line-height，font-size的一些问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
