摆脱嵌入式媒体的额外间距？答案

【问题标题】：Getting rid of extra spacing for embedded media?摆脱嵌入式媒体的额外间距？
【发布时间】：2015-03-27 05:03:16
【问题描述】：

我目前正在研究嵌入式媒体（twitter、instagram 等）的马赛克 Web 布局。

它有 3 列，其中填充了设置为显示的 div：无；使用 PHP 和 MYSQL。

一旦填充了 div，我将使用 Javascript 函数 showPost();显示内容。当用户滚动到页面底部时，showPost();再次调用以取消隐藏下一个 div。

我遇到了嵌入式媒体的间距问题，我无法找到解决办法。

我已经为这个问题创建了一个 JSFiddle。

我已经尝试了所有方法，内边距、边距、行高，都设置为零。

我不知道这个额外的间距是从哪里来的？任何帮助将不胜感激。

Click Here for JSFiddle

#column{
    position: absolute;
    padding: 0;
    margin: 0;
    width: 500px;
    line-height: 0;
}
#div01{
    position: relative;
    display: none;
    padding: 0;
    margin: 0;
    line-height: 0;
    background-color: blue;
}
#div02{ 
    position: relative;
    display: none;
    padding: 0;
    margin: 0; 
    line-height: 0;
    background-color: blue;
}
#div03{ 
    position: relative;
    display: none;
    padding: 0;
    margin: 0; 
    line-height: 0;
    background-color: blue;
}

【问题讨论】：

不需要的间距到底在哪里？
它位于每个嵌入式媒体的正下方。我正在尝试让嵌入的媒体堆叠到彼此齐平，它们之间没有新的行空间。
框架发生了一些奇怪的事情，我只是将边距设置为-10px，jsfiddle.net/4bL9teh1/6

标签： javascript html css

【解决方案1】：

Twitter 小部件 iframe 会自动为内容创建 margin: 10px 0px;。要删除此代码，只需将 iframe {margin: 0 !important} 添加到您的 css 文件就足够了。

Working demo

#column{
    position: absolute;
    padding: 0;
    margin: 0;
    width: 500px;
    line-height: 0;
}
#div01{
    position: relative;
    display: none;
    padding: 0;
    margin: 0;
    line-height: 0;
    background-color: blue;
}
#div02{ 
    position: relative;
    display: none;
    padding: 0;
    margin: 0; 
    line-height: 0;
    background-color: blue;
}
#div03{ 
    position: relative;
    display: none;
    padding: 0;
    margin: 0; 
    line-height: 0;
    background-color: blue;
}
iframe{margin:0 !important;}

【讨论】：

【解决方案2】：

该问题是由于 twitter 小部件添加了一个 iframe 并在 html 元素中设置了边距 (<iframe stlye="margin-top:...)。您可以使用一些 javascript 来解决这个问题，以便在添加 iframe 时检查它们并删除它们的边距。

$(document).ready(function(){
    showPost();

    $('body').on('DOMNodeInserted', 'iframe', function () {
        $('iframe.twitter-tweet').css({
             'margin-top': '0',
             'margin-bottom': '0'
        });
    });
});

jsfiddle

【讨论】：

谢谢！我不认为我自己能够解决这个问题，我花了大约 8 个小时断断续续地试图摆脱它。
也试试 yakutsa 的回答。这是一个更简单的解决方案。在求助于 JS 之前，我曾尝试过 CSS 解决方案，但由于某种原因它不起作用。 yakutsa 确实如此。