img与div以及两个img之间的缝隙问题

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

如有错误请各位大神评论指教……

发布了10 篇原创文章 · 获赞 2 · 访问量 389

猜你喜欢

转载自blog.csdn.net/weixin_44711440/article/details/103398630
IMG