<td id="1pm2i"><i id="1pm2i"></i></td>
課程
/前端開發
/HTML/CSS
/CSS深入理解之absolute
設置display:block后，第三張圖上移，如何解決？為什么會存在這種問題呢？
demo地址在這里
2015-11-22
源自：CSS深入理解之absolute 3-4
正在回答
你問的這個問題蠻不錯的。我覺著我有必要回答一下。第二張圖片包裹在一個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.
篇幅以及精力有限，并未展開這個間隙存在的具體原因。但是張鑫旭老師對這個現象有非常詳盡的博文，你可以搜一下。
hey自然
hjh399 提問者
那個間隙還是不怎么懂
為什么我引用外部鏈接<link href="css/index.css" rel="stylesheet" type="text/css"/>設置元素的margin-top不起作用而在元素上直接設置<link href="css/index.css" rel="stylesheet" type="text/css"/></div>就起作用呢，這一般是什么原因造成的
display:block？？？你說的應該是絕對定位后下面飄上去是吧？
colorado 回復 hjh399 提問者
舉報
理解CSSposition:absolute聲明，掌握position:absolute高級應用
1 回答絕對定位之后 margin-right就無效了
1 回答absolute + margin，為何不直接 inline-block + margin ？
1 回答求解 如果我有一張圖片，我想在這張圖片上設置我需要的效果，也可以不設置position：relative；嗎？
1 回答為什么content設置了overflow:auto以后，頭部和尾部就是fixed效果
3 回答為什么不讓ul跟隨input，把input的float去掉，然后讓ul的margin-top設置為0豈不是更簡潔么？
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
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.
篇幅以及精力有限，并未展開這個間隙存在的具體原因。但是張鑫旭老師對這個現象有非常詳盡的博文，你可以搜一下。
2016-03-11
那個間隙還是不怎么懂
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>就起作用呢，這一般是什么原因造成的
2015-11-23
display:block？？？你說的應該是絕對定位后下面飄上去是吧？