嵌套中的inline-block的margin问题

我刚做前端不久,遇到了一个问题让我很困惑,网上没有搜到相关答案,身边也没有合适的询问对象,所以到SF来求助各位前辈,如能帮忙解答,不甚感激!问题如下:

当上下两个div A,B相邻,而其中B div中又嵌套了一个C div时,如果C不是inline-block那么当设置C的margin-top属性时,并不会改变C在B中的位置,反而会带着B div一起位移,而当C为inline-block时,便会改变C在B中的位置。
如下图:
图片描述

这是当C div为block的时候,设置margin-top会带着外层的B一起移动。
图片描述
这是当C div变为inline-block的时候,可以看到这时候并未影响到外层的B div。

最后,这是demo的地址:
http://codepen.io/fleenn/pen/gaJxgX
新人入行可能问题很幼稚,但是确实让我很困惑,希望各位前辈们不吝赐教,非常感谢!

阅读 6.3k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
1 篇内容引用
推荐问题
宣传栏