HTML marginheight Attribute

Introduction

The marginheight attribute on <iframe> (and legacy <frame>) elements set the top and bottom internal margin in pixels between the iframe’s border and the embedded document content. It is deprecated in HTML5 and should not be used in new projects. Modern browsers often ignore it. Use CSS padding on a wrapper element or style the embedded page instead. Do not confuse it with CSS margin, which controls spacing around the iframe in the parent layout.

What You’ll Learn

Purpose of marginheight Attribute

The original purpose of marginheight was to add vertical breathing room inside an iframe—space between the iframe’s inner edge and where the embedded page content begins at the top and ends at the bottom. In early HTML layouts, authors used it alongside marginwidth to prevent embedded content from touching the iframe border.

HTML5 made presentation attributes like marginheight obsolete in favor of CSS. You may still see the attribute in legacy code or old tutorials. Understanding it helps when maintaining older sites, but new iframe layouts should rely on CSS padding, borders, and styling inside the embedded document.

📝 Syntax

Legacy syntax on an iframe (shown for recognition only—do not use in new projects):

<iframe
  src="example.html"
  width="300"
  height="200"
  marginheight="20"
  marginwidth="10"
  title="Embedded page"></iframe>

Modern CSS equivalent:

<div class="iframe-wrap">
  <iframe src="example.html" title="Embedded page"></iframe>
</div>

<style>
  .iframe-wrap {
    padding: 20px 10px; /* vertical horizontal — replaces marginheight + marginwidth */
    border: 1px solid #cbd5e1;
  }
  .iframe-wrap iframe {
    width: 300px;
    height: 200px;
    border: 0;
  }
</style>

Syntax Rules

• Historically valid on <iframe> and obsolete <frame> elements.
• Value is a non-negative integer in pixels (no units in the attribute value).
• Applies the same value to both top and bottom internal margins.
• Often paired with marginwidth for left and right internal margins.
• Deprecated in HTML5—use CSS padding or embedded-document styles instead.
• Always include a descriptive title on iframes for accessibility.

💎 Values

The marginheight attribute accepts a non-negative integer representing pixels:

• marginheight="0" — No extra top/bottom internal space (default in many browsers).
• marginheight="20" — 20 pixels of space at top and bottom inside the iframe.
• marginheight="8" — Small padding-like gap for compact embeds.
• Negative values are invalid—use zero or a positive integer only.

// Legacy IDL property (camelCase) — avoid in new code
var iframe = document.getElementById("myIframe");
iframe.marginHeight = 30;
iframe.setAttribute("marginheight", "30");

// Modern replacement
iframe.parentElement.style.padding = "30px 0";

Applicable Elements

marginheight vs CSS margin vs CSS padding

Examples Gallery

Legacy iframe markup, modern CSS padding replacement, and dynamic spacing with JavaScript.

<iframe
  src="example.html"
  width="300"
  height="200"
  marginheight="20"
  title="Embedded page"></iframe>

⚠️ Deprecated — use CSS padding on a wrapper instead.

<div class="iframe-wrap">
  <iframe src="example.html" title="Embedded page"></iframe>
</div>

<style>
  .iframe-wrap {
    padding: 20px 0;
    border: 1px solid #cbd5e1;
  }
  .iframe-wrap iframe { border: 0; width: 100%; height: 200px; }
</style>

<iframe id="myIframe" src="example.html" title="Embedded"></iframe>

<script>
  var iframe = document.getElementById("myIframe");
  iframe.marginHeight = 30; // legacy — deprecated
  iframe.parentElement.style.padding = "30px 0"; // modern
</script>

♿ Accessibility

• Always set title on iframes — Screen readers use it to describe embedded content when no accessible name is otherwise available.
• Spacing improves readability — Adequate padding around embedded widgets helps all users distinguish iframe content from surrounding page content.
• Use CSS, not marginheight — Reliable spacing ensures consistent visual separation for low-vision users across browsers.
• Embedded page accessibility — Spacing inside the iframe depends on the embedded document’s own HTML and CSS; ensure that page meets WCAG guidelines too.
• Avoid framesets — Legacy <frame> layouts with marginheight were difficult for assistive technology; modern single-page layouts with semantic HTML are preferred.

💡 Best Practices