在网上学习CSS过程中,发现了在一个大盒子div里,img和div之间会有一个小缝隙,原因为img的vertical-align属性为默认的baseline,将其改为top /middle /bottom即可。
原因分析:
要解决这个问题,首先要对vertical-algin的属性:top,middle,baseline,bottom有一定的认识,它们的作用分别为元素放置在父级元素的顶部,中间,基线,以及底部上。
将通过以下例子,来获得更好的认知:
top:
<style>
.bigBox {
margin: 0 auto;
background-color: pink;
height: 400px;
width: 400px;
}
.littleBox {
background-color: blue;
height: 100px;
bottom: 0;
}
img {
vertical-align: top;
}
</style>
<div class="bigBox">456
<img src="speedtime.png" height="200" width="100" alt="">fffyyy
<div class="littleBox" >123</div>
</div>
结果为:
middle同理,此处不再演示,关键为以下两个属性:
baseline:
bottom:
baselin图中,红色框框部分即为img和div之间的小空隙,图片以字符f或者456的最低端(基线)作为图片的底部,而基线之下还有底线,即字符y的最低端作为底线,所以img和div之间存在着小空隙。
而bottom图中,图片以y的最低端(底线)作为图片的底部,进而消除了中间的小空隙。
而top以及middle的原理也是一样的,只要使图片的放置位置不是在基线上,就能消除掉小空隙。
css自学小白,这是我在一次作业当中发现的问题,结合了一下其他人的解法,以及自己的一些让我能接受的做法,而写了这么一篇文章。可能这中间我有些会理解不到位,还请各位大佬指出。
顺便提出新疑问:当属性为top时,为何f的顶部不是紧贴着盒子的顶部?
暂定思路:存在着比f顶部更高的字符,其空位是为尚未用到的某个字符而准备的。