Html 如何从 iframe 内部删除额外的边距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15011230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I remove extra margin from INSIDE an iframe?
提问by Joel Trauger
I am currently developing a rotating montage of mixed media on a website. There are about 5 images/videos that will appear in rotation on the site. The site also uses the Ektron CMS, so there is no way that I can determine which slots in the montage will be images and which will be videos. (The videos are hosted on YouTube.)
我目前正在网站上开发混合媒体的旋转蒙太奇。大约有 5 个图像/视频将在网站上轮流出现。该站点还使用 Ektron CMS，因此我无法确定蒙太奇中的哪些插槽将是图像，哪些将是视频。（这些视频托管在 YouTube 上。）
So, my problem is that the videos load perfectly aligned with the inside edge of the iframe, but the images load with a slight margin of about 10px INSIDE the iframe which is verybad because our site is laid out very precisely and a slight variation of even onepixel can mess it up. This only appears in FireFox and IE. I've tested in Chrome and Safari and it works perfectly. These 4 browsers are the only 4 that we officially support.
所以，我的问题是视频加载与 iframe 的内边缘完全对齐，但图像加载时在 iframe 内部有大约 10 像素的微小边距，这非常糟糕，因为我们的网站布局非常精确，并且在即使是一个像素也能搞砸。这仅出现在 FireFox 和 IE 中。我已经在 Chrome 和 Safari 中进行了测试，效果很好。这 4 种浏览器是我们正式支持的仅有的 4 种。
Here's my HTML:
这是我的 HTML：
<head>
<body>
<div id="mainImage">
<iframe scrolling="no" frameborder="0" runat="server" id="MainImage1"
src="http://www.youtube.com/embed/u1zgFlCw8Aw?wmode=transparent">
IFRAMES do not work in your browser</iframe>
<iframe scrolling="no" frameborder="0" runat="server" id="MainImage2"
src="images/default/mainImage/mainImage_02.jpg">
IFRAMES do not work in your browser</iframe>
</div>
</body>
</head
The CSS is as follows:
CSS如下：
#mainImage iframe{position:absolute; top:0; left: 0; padding:12px 0 0 12px; display:block;}
#mainImage iframe html, body{ margin:0px; padding:0px; border:0px;}
This is the only code on the site that actively affects the way that the iframes display.
这是网站上唯一会主动影响 iframe 显示方式的代码。
So, my question is, how can I get rid of that margin inside the iframe and why does it only display in FireFox and IE???
所以，我的问题是，我怎样才能摆脱 iframe 内的边距，为什么它只在 FireFox 和 IE 中显示？？？
采纳答案by Diodeus - James MacFarlane
回答by Drasill
It seems like marginheightand marginwidthdoes the job, too. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe.
它似乎marginheight也能marginwidth完成这项工作。请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe。
Often I use :
我经常使用：
<iframe src="..."
marginwidth="0"
marginheight="0"
hspace="0"
vspace="0"
frameborder="0"
scrolling="no"></iframe>
