從嵌入式內容中刪除不需要的邊距/填充

我在圖像下方的頁面中嵌入了SoundCloud小部件。從嵌入式內容中刪除不需要的邊距/填充

圖像底部和小部件頂部之間有一個小空間。我用Web Inspector來追蹤這個差距來自哪裏，但我找不到它。我想刪除這個空間。

的代碼非常簡單：

<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Image-New_Delhi_Lotus.jpg"> 
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F66379982?"></iframe>

查看在行動代碼：http://jsfiddle.net/LAn3A/

我甚至不能告訴我們，如果這個差距是由於邊框，填充或保證金。我確定它來自SoundCloud小部件。

來源

2012-11-30 Olly F

嵌入式iframe通常不會在周圍添加填充/邊距。這可能是您的CSS添加了邊距或填充。在這個沙箱網站上查看你的代碼：http：//jsbin.com/ulotun/1/edit小部件周圍沒有空白。 – Mohsen

實際上在您剛發佈的網站代碼中有一個空間。看起來非常緊密的小部件！ http://i.imgur.com/jdyKf.png –

所以填充不在iframe附近 – Mohsen

當您嘗試在塊級元素旁邊緊密放置內聯元素時，可能會發生這種情況。文本屬性（如行高）會妨礙您的行爲。通過將圖像設置爲塊級元素來修復它：

img { display: block;}

來源

2012-11-30 17:51:30 KatieK

太棒了！你解決了它。對於獎勵積分，你能解釋一下爲什麼發生這種情況嗎？ –

圖像是內聯元素，您可以將其視爲文本行中的字母或單詞。有影響內聯元素的CSS屬性，比如'line-height'，'vertical-align'（都在父元素上設置）以及它們的佈局方式。所以在這種情況下，在父元素上設置的默認行高度會影響包含圖像的行。 –

從嵌入式內容中刪除不需要的邊距/填充

回答

相關問題