资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

怎么解决img标签上下出现间隙的问题-创新互联

小编给大家分享一下怎么解决img标签上下出现间隙的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

目前创新互联公司已为近1000家的企业提供了网站建设、域名、雅安服务器托管、网站托管、服务器托管、企业网站设计、余干网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

我们在平常的开发过程中,经常需要使用多张图片,而使用多张图片的时候,我们一般会去使用一个列表来对我们的img 进行承装。




    
    Document
    
        img{
            height: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid red;
        }
        ul{
            border: 1px solid blue;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    



    
            
  •                      
  •     

但是这个时候我们发现了一个问题,为什么我的图片下面多出来一条线呀?

怎么解决img标签上下出现间隙的问题

这是怎么回事呀?

我不是已经把 img 的外边距和内边距什么的全部清空了么?

实际上,这其实是inline元素搞的鬼。

任何不是块级元素的可见元素都是内联元素,其表现的特性是“行布局”形式。----《CSS权威指南》


什么意思?

意思就是,其实如图片文字等内联元素,它默认对齐方式都是和它的父级的 baseline 去进行对齐的,但是你对齐的是 baseline,撑开高度的却是元素整体的高度(bottom line),这样肯定就会造成一定的间隙,也就是我们上文出现的问题了。

怎么解决img标签上下出现间隙的问题

那我们既然知道了这个问题出现的原因,那么解决起来也就简单多啦。

1.第一种解决方案


既然是 inline 元素才会发生这个问题,那我们自然可以简单粗暴的解决这个问题,那就是给我们的元素“变个性”,让它从 inline 变为 block 不就可以了么?


        img{
            height: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid red;

            display: block;
        }
        ul{
            border: 1px solid blue;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    

2.第二种解决方案


这也太粗暴了,变了性别,回头还怎么愉快的玩耍呀,所以我们要尝试曲线救活,我们可以去修改一下它的垂直对齐方式呀,这样是不是就可以了呢?

   
        img{
            height: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid red;

            vertical-align: middle;
        }
        ul{
            border: 1px solid blue;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    

可以看出,这样也可以实现想要的效果。

原因在于,vertical-align 的默认属性就是 baseline ,我们只要设置了跟 baseline 不一样的属性,都可以避免这个问题。

怎么解决img标签上下出现间隙的问题

3.第三种解决方案


但是修改了对齐方式,这样也有可能会造成问题呀,我们可不可以去让这个元素飘起来呢?既然你已经不在当前文档流中了,你布局的时候自然也就不会参照这个文字去进行对齐了呀。

我们可以去使用浮动。


        img{
            height: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid red;

            float: left;
        }
        ul li {
            overflow: hidden;
        }
        ul{
            border: 1px solid blue;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    

这样也可以解决这个问题,但是请注意,“浮动虽好,可不要贪杯呦”。

你一定要能够正确的解决浮动所造成的影响,而且假如你原本就打算去做文字环绕效果,那么使用浮动一定是你的不二选择。

4.第四种解决方案


假如上面几种方案全都不能解决你的问题,那么只有祭出我的大杀器了。

你可以给你的父元素把文字大小设成0。


        img{
            height: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid red;
        }
        ul li {
            font-size: 0px;
        }
        ul{
            border: 1px solid blue;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    

既然你是根据 文字的基线去对齐,我直接把文字给你设没了,这样你就没法定位了吧,但是这种做法,只推荐在你已经“急头白脸死活弄不出来”的时候才去使用的。

以上是“怎么解决img标签上下出现间隙的问题”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


新闻标题:怎么解决img标签上下出现间隙的问题-创新互联
URL网址:http://cdkjz.cn/article/cscocd.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220