How can I remove extra margin from INSIDE an ifram

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.)

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 very bad because our site is laid out very precisely and a slight variation of even one pixel 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.

Here's my 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:

#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.

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???

回答1:

It's the body of the Iframe content that controls this, not the Iframe itself.

Use a CSS reset on the Iframe pages (it won't hurt on the parent page either) and all will be well.

回答2:

It seems like marginheight and marginwidth does the job, too. See 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>