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%，此时也不会出现这条边距
所有回答(3)
0
不知所问！
我把问题补充了
0
pedding, margin, float..
多的是辦法解決
我想知道的是它的成因。至于解决办法 我在问题里面说了 而padding和margin我个人不认为作为解决的办法，因为你没有办法直接获取它的高度，你需要额外计算。float……我尝试了一下，确实可以配合clear解决这个问题，并实现布局……这一点让我学习到了 谢谢
已经改正我的说法了
@陆潮海:
成因講簡單就是Browser的引擎設計如此
要講深了，引擎開發時為什麼做這樣的設定..
我回答不出來
各個瀏覽器Render的結果都有些微的差異
我覺得了解差異在哪，比了解為何有差異有意義
@RosonJ: 我的想法其实不是了解引擎的设计原理之类的 而是想知道img这个标签的设计 比如li如果回车设置display：inline-block会导致之间的间隔一样。我想知道是什么造成了这么一种现象。当然，可以选择不知道，而是记住，而是知道差异，然后对应的做出处理方案。可是如此的感觉给我的意思就是治标不治本……可能其他地方也会出现这种类似的现象，对于我们只能去被动的收集这些坑，而不是找到这些坑的根源
0
你点开f12看下样式不就明白了
（微笑）这个问题不是看盒子模型就可以看出来的
。。。为什么说看不出来呢。
@司幸: 是，display可以看出是inline。你可以理解为我对inline的理解不深，我不明白为什么inline会导致这样的间隙问题…… 我查了linebox的概念，一是里面最大的元素会撑起高度，二是因为换行或者空格导致出现间隙。问题是我让这两个元素之间并没有换行，也没有空格，它依旧出现这个间隙…… 或者说是不是inline还有什么其他的原因？
我刚回去看了一下 img我是没有任何display属性的 至于之后的div 我是用了display:flex 和这个有关系么？
@陆潮海:跟后面的div没有关系。inline就说明是个行元素。行元素距离下一行的距离跟其父元素的line-height相关属性有关系，如果你的img外包有父类元素。如果没有，那也有浏览器默认解释的类似东西。（可以理解为浏览器在所有连续的inline元素(直到下一个块元素出现)外包了一个块元素，个人理解。）
所以你这个间隙只是img与父块元素底部的间隙 而不是跟下一个块状元素的间隙。
解决办法就是把你的img设置成block元素。或者像你一样让他居底部，或者把它父元素的line-height设置为0.
