HTML中图文混合引发莫名空白问题研究

作者：袖梨 2022-06-25

HTML5如火如荼，几个月前的项目要部分应用新技术，尤其是简单的文档类型声明（不区分大小写），非常吸引人。中途因为IE8等在第一次打开网页时会阻止js执行，停在询问页面，导致新的标记无法识别使页面十分混乱而作罢，但doctype的简约定义仍在使用。可是在后续做到上图下文的格式时，发现图片下方会出现莫名空白区域，经验上是没问题的，于是翻来覆去的比对，发现唯一不同只在doctype的定义了，替换成旧版的过渡模式确实就变好了，后来发现设置图片容器的line-height为0也可以，一直对付着用，今天又翻出这个问题，仔细研究下，发现是图片垂直方向对齐方式和line-height共同作用的结果。

测试代码如下：

    
            <style type="text/css教程"> 
        
            img,div,span{border:none;padding:0;margin:0;} 
        
            .example_box{line-height:75px;width:500px;background-color:#eee;border:10px solid #f60;} 
        
            .example_box div{background-color:#690;} 
        
            .example_box span{font-size:16px;background-color:#d40;} 
        
            style> 
        
            <div class="example_box"> 
        
                <img src="photo/image5.jpg" height="150" alt=""/> 
        
                <div> 
        
                    <span>标记文字(line-height:75px;)span> 
        
                div> 
        
            div>

默认表现（Firefox下）：

firefox下默认表现" src="https://img.111com.net/get_pic/2011/05/20110803091043272.jpg" />

图1

可以很明显的看出来和

之间有个明显的间距，大小接近

行高的一半。

如果将包含文字的

修改显示类型为 display:inline-block; ，那么表现如图2：

图2

可以看出图片和文字的对齐方式是图1中图片与文字区域间距的来源。

而间距的大小，则由line-height的值决定，但里面的比例并不是很清楚，大概在不到一半的水平上。这里不再贴图展示，主要讨论图片的垂直对齐方式对问题产生的影响。

图片的vertical-align属性值默认为baseline，测试其他几个属性，分别如下图：

图3（vertical-align:top;）

图4（vertical-align:text-top;）

图5（vertical-align:text-bottom;）

图6（vertical-align:bottom;）

图7（vertical-align:middle;）

就vertical-align的几个值来看，

baseline与text-bottom最接近，但是前者右侧的文字更靠下些。这个特性很多地方都能轻易的看到，如图8插入了表情的微博。开心网的状态和记录对此做了调整；
text-top、text-bottom对齐的是inline包含文字的区域（这个区域不是line-height决定，而是font-size和浏览器对inline区域默认表现共同决定。关于inline区域不同浏览器表现比较复杂，这里不予讨论）；

HTML中图文混合引发莫名空白问题研究

相关文章

精彩推荐