【www.bbyears.com--今天更新】
今天在debug代码的时候,遇到一个css问题。注意看出现了一些空隙。以前遇到此类问题,我一般做法都是直接加display:block进行解决,今天深入分析一下原因。
首先看这段空隙对应的源代码如下
代码看起来没有任何问题,那么问题真的来了:
空隙去哪里了啊?
问题原因:
图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和
解决方案:
将图片display: block
设置img为“display:block;”。在本例中添加一组CSS代码:“img {display:block;}”。比较常用的做法。
设置图片的对齐方式
即设置图片的vertical-align属性为“top,text-top,bottom,text-bottom”也可以解决
设置图片的父级对象文字大小为0px
“font-size:0;”可以解决问题。但这也引发了新的问题,在父对象中的文字都无法显示。就算文字部分被子对象括起来,设置子对象文字大小依然可以显示,但在CSS效验的时候会提示文字过小的错误。
设置图片的浮动
即在本例中增加一行CSS代码:“#sub img {float:left;}”。如果要实现图文混排,这种方法是很好的选择。
各种做法自行考量,我偏向于设置浮动或块显示,有些人偏向于使用vertical-align进行解决。