首页 新闻 搜索 专区 学院

img标签与div标签之间不可控的间隔问题

0
[待解决问题]

我发现在chrome出现了!

并且只能通过vertical-align: bottom;来解决(这里说的有些绝对了)

用float,clear布局也可以避免这样的问题发生。

问题是我想知道成因?为什么会出现这种情况

问题补充:

<img class="mainImg" src="images/cbd.jpg"/>
<div class="msg">nihao</div>

这里可能跟img的设置有关系……我是这样设置的

width:100%;
height: auto;

布局时是上下结构,显示的时候发现这两个标签之间有一条不可控的边距

如果border-radius为50%,此时也不会出现这条边距

小路orz的主页 小路orz | 菜鸟二级 | 园豆:204
提问于:2015-12-09 14:41
< >
分享
所有回答(3)
0

不知所问!

[0] | 园豆:1257 (小虾三级) | 2015-12-09 14:42

我把问题补充了

支持(0) 反对(0) 小路orz | 园豆:204 (菜鸟二级) | 2015-12-09 14:47
0

pedding, margin, float..

多的是辦法解決

RosonJ | 园豆:4910 (老鸟四级) | 2015-12-09 14:52

我想知道的是它的成因。至于解决办法 我在问题里面说了 而padding和margin我个人不认为作为解决的办法,因为你没有办法直接获取它的高度,你需要额外计算。float……我尝试了一下,确实可以配合clear解决这个问题,并实现布局……这一点让我学习到了 谢谢

支持(0) 反对(0) 小路orz | 园豆:204 (菜鸟二级) | 2015-12-09 15:02

已经改正我的说法了

支持(0) 反对(0) 小路orz | 园豆:204 (菜鸟二级) | 2015-12-09 15:03

@陆潮海: 

成因講簡單就是Browser的引擎設計如此

要講深了,引擎開發時為什麼做這樣的設定..

我回答不出來

各個瀏覽器Render的結果都有些微的差異

我覺得了解差異在哪,比了解為何有差異有意義

支持(0) 反对(0) RosonJ | 园豆:4910 (老鸟四级) | 2015-12-09 15:10

@RosonJ: 我的想法其实不是了解引擎的设计原理之类的 而是想知道img这个标签的设计 比如li如果回车设置display:inline-block会导致之间的间隔一样。我想知道是什么造成了这么一种现象。当然,可以选择不知道,而是记住,而是知道差异,然后对应的做出处理方案。可是如此的感觉给我的意思就是治标不治本……可能其他地方也会出现这种类似的现象,对于我们只能去被动的收集这些坑,而不是找到这些坑的根源

支持(0) 反对(0) 小路orz | 园豆:204 (菜鸟二级) | 2015-12-09 15:16
0

你点开f12看下样式不就明白了

司幸 | 园豆:319 (菜鸟二级) | 2015-12-09 15:51

(微笑)这个问题不是看盒子模型就可以看出来的

支持(0) 反对(0) 小路orz | 园豆:204 (菜鸟二级) | 2015-12-09 16:39

。。。为什么说看不出来呢。

支持(0) 反对(0) 司幸 | 园豆:319 (菜鸟二级) | 2015-12-11 15:13

@司幸: 是,display可以看出是inline。你可以理解为我对inline的理解不深,我不明白为什么inline会导致这样的间隙问题…… 我查了linebox的概念,一是里面最大的元素会撑起高度,二是因为换行或者空格导致出现间隙。问题是我让这两个元素之间并没有换行,也没有空格,它依旧出现这个间隙…… 或者说是不是inline还有什么其他的原因?

支持(0) 反对(0) 小路orz | 园豆:204 (菜鸟二级) | 2015-12-11 15:24

我刚回去看了一下  img我是没有任何display属性的 至于之后的div 我是用了display:flex 和这个有关系么?

支持(0) 反对(0) 小路orz | 园豆:204 (菜鸟二级) | 2015-12-11 15:27

@陆潮海:跟后面的div没有关系。inline就说明是个行元素。行元素距离下一行的距离跟其父元素的line-height相关属性有关系,如果你的img外包有父类元素。如果没有,那也有浏览器默认解释的类似东西。(可以理解为浏览器在所有连续的inline元素(直到下一个块元素出现)外包了一个块元素,个人理解。)

所以你这个间隙只是img与父块元素底部的间隙 而不是跟下一个块状元素的间隙。

解决办法就是把你的img设置成block元素。或者像你一样让他居底部,或者把它父元素的line-height设置为0.

支持(0) 反对(0) 司幸 | 园豆:319 (菜鸟二级) | 2015-12-11 17:10
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册