- 有缝隙的原因:
是由于img标签的display:inline-block属性;
display:inline-block布局的元素在页面中显示时会出现几像素的间隙。这个原因是编辑代码时,inline-block布局的元素标签不在同一行,之间存在换行符,即“换行 符/空格间隙问题”。还有就是像img这样的内联元素,其默认对齐方式是根据父级的 baseline 进行对齐,对齐的是 baseline,撑开的却是元素整体的高度(bottom line),这样就会造成缝隙。 - 解决方法:
- 把img标签的display属性改成block;
img{dispaly:block;}
- 改变img垂直对齐方式:(下面三个其中一个就可以);
img{vertical-align:buttom;} img{vertical-align:middle;} img{vertical-align:top;}
- 把img父级元素div的文字大小设置为0;
div{font-size:0};
- 可设置浮动float,并清除浮动;
此方法相对来说稍微麻烦一点儿~~ - 如果是多个img标签,也可写在一行,从而消除换行符;
但是此方法会影响html的页面美观效果~~<img src="img/about_link_img.jpg" alt="" /><img src="img/about_link_img.jpg" alt="" />
如有错误请各位大神评论指教……