                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之absolute

设置display:block后，margin失效，如何解决

设置display:block后，第三张图上移，如何解决？
为什么会存在这种问题呢？

demo地址在这里

hjh399

2015-11-22

源自：CSS深入理解之absolute 3-4

关注问题我要回答

4215

操作

收起

4 回答

hey自然回答被采纳 +3 积分
2015-12-09

你问的这个问题蛮不错的。我觉着我有必要回答一下。第二张图片包裹在一个div之内。

这个间隙是img和div之间的间隙。为什么会有这么一个间隙。img本身是inline-block 水平的元素，因而会受到line-height与vertical-align(而vertical-align 默认是baseline对齐)的作用。而img,block 化之后，便不再受到line-height和vertical-align的影响。

解决方法这个存在的间隙的方法，如果img不设置block的话，可以尝试设置其父元素的，1.)可以尝试把 line-height设置足够小。2.)可以把vertical-align的对齐方式设置为bottom，middle，top。3.)font-size设置为0.

篇幅以及精力有限，并未展开这个间隙存在的具体原因。但是张鑫旭老师对这个现象有非常详尽的博文，你可以搜一下。

3 回复有任何疑惑可以回复我~

收起回答

hey自然

http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

2015-12-09 回复有任何疑惑可以回复我~

hjh399 提问者

非常感谢！

2015-12-09 回复有任何疑惑可以回复我~

深山小童
2016-03-11

那个间隙还是不怎么懂

0 回复有任何疑惑可以回复我~

收起回答

天涯922
2016-03-06

为什么我引用外部链接<link href="css/index.css" rel="stylesheet" type="text/css"/>设置元素的margin-top不起作用而在元素上直接设置<link href="css/index.css" rel="stylesheet" type="text/css"/></div>就起作用呢，这一般是什么原因造成的

0 回复有任何疑惑可以回复我~

收起回答