In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > marginHeight (frame, iframe)

marginHeight property (frame, iframe)

Browser support:

Sets or retrieves the top and bottom margins for a frame element.

Syntax:

object.marginHeight;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: marginHeight

Possible values:

String that sets or retrieves the height of the margin, with an integer optionally followed by a 'px' (pixel) unit designator. Negative values are not allowed.

Default: 0.

Example HTML code 1:

This example illustrates the use of the marginHeight attribute:

Code

frame.htm

<iframe src="frame.htm" width="250px" height="250px" marginheight="200px"></iframe>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:#fbd8a4;">
    <h1>Contents of the frame</h1>
</body>
</html>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the marginHeight property:

Code

frame.htm

<head>
    <script type="text/javascript">
        function SetMarginHeight () {
            var input = document.getElementById ("myInput");
            var iframe = document.getElementById ("myFrame");
            iframe.marginHeight = input.value;

            // To solve the refresh problems
            // Internet Explorer
            iframe.src = iframe.src;
            // Firefox
            var nextElem = iframe.nextSibling;
            var paren = iframe.parentNode;
            paren.removeChild (iframe);
            paren.insertBefore (iframe, nextElem);
        }
    </script>
</head>
<body>
    <iframe id="myFrame" src="frame.htm" width="250px" height="210px" marginheight="140px"></iframe>
    <br />

    <input id="myInput" type="text" value="20" />
    <button onclick="SetMarginHeight ();">Set marginHeight!</button>
</body>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:#fbd8a4;">
    <h1>Contents of the frame</h1>
</body>
</html>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by objects:

HTML elements:

frame, iframe

External links:

marginHeight (MSDN)
marginHeight (Safari Reference Library)
marginHeight (W3C)

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments

bholley

refresh problems

I just fixed the refresh problems alluded to in the example code for Firefox. Should be in Firefox 6. http://hg.mozilla.org/mozilla-central/rev/a7e15c159eec