Search code examples
htmliframemargin

Margin on iFrame Tag

I have an iFrame tag that loads a scrolling picture banner, and when it loads it has a new html and body tag inside a #document. Everything loads ok, but the problem is that is has an auto 8px margin. I have set every property I can think of to 0px but nothing affects it. I have tried the ideas on the posts about similar issues, but nothing has worked. 

<div id="header">

    <ul id="menu">
        <li class="menuItem"> <a href="home.html">Home</a>  </li>
        <li class="menuItem"> <a href="music.html">Music</a>  </li>
        <li class="menuItem">  <a href="services.=html">Services</a>  </li>
        <li class="menuItem">  <a href="contact.html">Contact</a>  </li>
        <li class="menuItem">  <a href="bio.html">Bio</a>  </li>
    </ul>

<iframe src="standard.html" id="bannerObj" scrolling="no" margin="0"></iframe>

Here is the full code on jsfiddle - https://jsfiddle.net/35rf6ga6/

Solution

  • iframe has a border by default. Try putting a border="0" attribute on your iframe element or add border: none; in CSS.