How can I remove extra margin from INSIDE an iframe?

html internet-explorer firefox iframe

24,979

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

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

24,979

Author by

Joel Trauger

Graduated in '12 with a BS in Computer Science. Since then I've worked in higher education and financials. I'm currently stationed with Gainwell Technologies as a UI/UX developer. I cut my teeth on Microsoft QuickBasic in high-school and quickly moved on to Assembly, C/C++, Java, C#, and other languages as needed. I have some experience with HTML, CSS, JS, C#.NET, VB.NET, Excel VBA, Python, SQL and I'm sure a few others I've forgotten about.

Updated on June 26, 2020

Comments

Joel Trauger almost 4 years
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???
Joel Trauger about 11 years

If the content of the iframe is only either an embedded video from YouTube or an image from the webserver, then how can I do the CSS reset like you mentioned above?
Diodeus - James MacFarlane about 11 years

You cannot control the content of an Iframe from a different domain due to the Same Origin Policy which is in place to prevent cross-site scripting attacks.
Joel Trauger about 11 years

Well I don't need the CSS reset for the youtube videos because they already work (they probably have their own CSS that does this already). It's the images from the webserver (in the same domain) that I'm having issues with.
Joel Trauger about 11 years

It worked. I found a way to load in the image in a separate page and then apply the CSS reset to that page. The new page would then be loaded into the iframe.
Purple Piranha about 3 years

This answers the question better than the accepted answer as it also deals with cross domain iframes.