图片以及其他替换元素的空隙问题

今天来聊聊图片,当然,对于web来说,图片是个大命题,多大呢?要多大有多大~ 这里只谈它是怎么“不听话的”,然后让它乖一点。

Web的世界里有很多问题,与之对应的基本也有很多情景和对策。那么问题就来了,我们遇到某种情景和找到的对策也都具有偶然性,下面来挑很多人都遇到过的一种情况说说。

上篇文章我们谈了inline-block的空隙,这篇文依然是聊空隙。通过上篇文,我们可以看出,其实空隙和元素本身并无直接关系,因为它真的就是“空隙”。但是小小的空隙却常给我们带来小小的困惑和麻烦。

场景:“这是怎么回事啊,我什么都没有给图片设置,为什么这里有个空隙?!然后,margin、padding、border、outline…(七大姑八大姨)全都去掉了,为什么还有?!肿么办呐?!”

对于以上场景你是否熟悉捏?~颇有病急乱投医,reset掉它全家的意味哈!

再稍微分两种情况来说(其实没啥区别),一种是img“裸奔”,另一种是被其他元素包裹,比如div或者li等。

“裸奔”代码如下:

<div class="img_list">
    <img src="images/xiang01.jpg" alt="">
    <img src="images/xiang02.jpg" alt="">            
    <img src="images/xiang03.jpg" alt="">
    <img src="images/xiang04.jpg" alt="">
    <img src="images/xiang05.jpg" alt="">            
</div>

实现如下:

聪明如你应该看出端倪了对吧?是的,每张图片的右边如预期般出现了空隙,但事实仅仅如此么?~ 我们把容器缩小看一下 duang~

原来不只是右边有,下面也有?似曾相识吗?

方法一:font-size:0;

是的。“音烂不唠嗑”那家伙好像也是有空隙,那我们用其中一种方法把它消除掉试试,把font-size设置为0;

呜呼,果然,那这是第一种方法。

方法二:float

由于float能让元素脱离正常文档流,可谓有摧毁一切的架势,这里也不意外,使用float就可以使他们消失于无形,如果赶上你制作图文混排文字环绕的效果,那就是一举两得了~

方法三:vertical-align:XX;

或许你会有点奇怪,为什么是XX?没错,有些文章中有说设为“top”,有些文章中说用“bottom”,可是在css如此的精彩世界里,你会对这么一个简单的答案满足么?总会多问几个why?然后,you try try 便会发现,,原来设置top|bottom|middle|text-bottom|text-top等都是可以消除掉这个空隙的,但需要注意,往往页面中不是一个图片孤立的存在着,设定不同的值可能会对其他的内容产生不同的影响,这里不细说,具体请各位去了解下vertical-align方面的东东(下面有个张老师的链接)。至于为什么vertical-align有除掉这个空隙的作用呢?

据不完全考察,图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关),所以设置 vertical-align的某些值可以避免这种情况出现。你可以试一下设置一个具体的负百分比值也行哦~

方法四:display:block;

为什么这种方法是可行的呢?其实这个方法跟方法三和方法二有着某种微妙的联系,what?莫急,先来说跟方法三有何联系,方法三里,扯到了baseline,也扯到了vertical-align,但没有扯一扯它在哪些元素上起作用,是的,对于block级的元素,它们是玩儿不了的,也可见张老师牛奶/果冻/坚果,故而,设置为block,它就干掉了空隙。跟方法二的关系是,不知大家是否注意到行级元素在设置float之后,具备了块级元素所具备的功能,比如设置宽高,内外边距等,所以,浮动,效果跟此法类似。 当然,鉴于block之后会改变它本身inline的表现,有些朋友可能会考虑inline-block,but这样是不凑效的,况且,它本身就存在这样的问题。

方法五:为父容器设置高度

现在才说起这个看起来平常的方法可不是我不够坦白,因为很多人可能从来没有遇到过图片空隙这样的问题,会觉得这是个挺难遇到的bug,其实不然,没有遇到右边的空隙是因为,只要它不是裸奔,譬如这样:

<ul class="img_list">
    <li><img src="images/xiang01.jpg" alt="">
        </li>
    <li><img src="images/xiang02.jpg" alt="">
        </li>
    <li><img src="images/xiang03.jpg" alt="">
        </li>
    <li><img src="images/xiang04.jpg" alt="">
        </li>
    <li><img src="images/xiang05.jpg" alt="">
        </li>
</ul>

img被一个容器包裹起来,这里是li,还可以是别的,那么右边的空隙就没了,因为它是存在于img之间,这里有一层容器将其隔开。当然了,可能还会因为设置了margin值,从视觉上直接忽略了空隙的存在,不在讨论之列哈~ 没有遇到过下面的空隙,可能是无意间使用了能够消除掉它的方法,最平常和自然的就是设置父容器高度了。

方法六:无缝排列

这个方法和消除inline-block空隙同理,让它们紧密排列即可,不过同样,从代码的格式上来说不宜采取。

讨论了这么多,貌似这种现象是img所独有的,是么?聪明如你可能又猜对,no!~ 可能大家都知道html的元素中有一类元素叫做替换元素,什么是替换元素呢,咱拿规范说说事儿吧;以img为例:

The IMG element embeds an image in the current document at the location of the element’s definition. The IMG element has no content; it is usually replaced inline by the image designated by the src attribute。

这是规范里对img的描述,简单说来img元素没有内容,它是把来自src属性值的那个图片嵌入页面中。

说到这里,是不是想起还有不少元素是这样的?比如input、textarea、select等等?

是的,它们同样存在着缝隙问题,为什么呢,看图

是否有秒懂的感觉?

好吧,扯了不少了,里面提到了好几个东东,没有细谈,因为每一个挑出来都够喝一壶的,所以,不细聊了,重点还是帮助有遇到类似问题的朋友找到较合适的解决方法。文中可能有不当之处,还望指教。

欢迎来这里交流:152128548
欢迎关注微信公众号:前端周末

灵感_idea wechat
欢迎关注我的公众号“灵感周末”,每个周末推送优质好文!
给加个蛋呗