HTML marginwidth Attribute

Introduction

The marginwidth attribute on <iframe> (and legacy <frame>) elements set the left and right 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 horizontal 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—nor with width, which sets the iframe’s outer dimensions.

What You’ll Learn

Purpose of marginwidth Attribute

The original purpose of marginwidth was to add horizontal breathing room inside an iframe—space between the iframe’s inner left and right edges and where the embedded page content begins. In early HTML layouts, authors used it alongside marginheight to prevent embedded content from touching the iframe border on all sides.

HTML5 made presentation attributes like marginwidth obsolete in favor of CSS. You may still see the attribute in legacy code. 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"
  marginwidth="20"
  marginheight="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: 10px 20px; /* 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 left and right internal margins.
• Often paired with marginheight for top and bottom internal margins.
• Deprecated in HTML5—use CSS padding or embedded-document styles instead.
• Always include a descriptive title on iframes for accessibility.

💎 Values

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

• marginwidth="0" — No extra left/right internal space (default in many browsers).
• marginwidth="20" — 20 pixels of space on the left and right inside the iframe.
• marginwidth="8" — Small horizontal 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.marginWidth = 20;
iframe.setAttribute("marginwidth", "20");

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

Applicable Elements

marginwidth vs CSS margin vs CSS padding

marginwidth vs marginheight on <iframe>

Examples Gallery

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

<iframe
  src="example.html"
  width="300"
  height="200"
  marginwidth="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: 0 20px;
    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.marginWidth = 20; // legacy — deprecated
  iframe.parentElement.style.padding = "0 20px"; // modern
</script>

♿ Accessibility

• Always set title on iframes — Screen readers use it to describe embedded content when no accessible name is otherwise available.
• Horizontal spacing improves readability — Adequate padding around embedded widgets helps all users distinguish iframe content from surrounding page content.
• Use CSS, not marginwidth — 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 marginwidth were difficult for assistive technology; modern single-page layouts with semantic HTML are preferred.

💡 Best Practices