HTML Code

<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset=UTF-8>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <title>marginheight — CSS replacement</title>
  <style>body{font-family:system-ui,sans-serif;margin:0;padding:1.5rem;background:#f8fafc;color:#334155;line-height:1.7}h1{margin:0 0 .75rem;font-size:1.25rem;color:#0f172a}.ok{max-width:520px;padding:.75rem 1rem;background:#ecfdf5;border:1px solid #6ee7b7;border-radius:8px;font-size:.8125rem;color:#065f46;margin-bottom:1rem}.frame-wrap{display:inline-block;padding:24px 0;background:#e2e8f0;border:2px solid #64748b;border-radius:8px}iframe{display:block;border:0;width:320px;height:80px}.hint{margin-top:1rem;font-size:.8125rem;color:#64748b;max-width:520px}code{background:#e2e8f0;padding:.1rem .35rem;border-radius:4px}</style>
</head>
<body>
  <h1>CSS padding instead of marginheight</h1>
  <p class=ok><strong>Today:</strong> Wrap the iframe and use <code>padding</code> (or style the embedded page) for vertical spacing.</p>
  <div class=frame-wrap>
    <iframe srcdoc="&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body style='margin:0;font-family:system-ui;padding:8px;background:#dbeafe;'&gt;Embedded content&lt;/body&gt;&lt;/html&gt;" title="Spaced iframe demo">
    </iframe>
  </div>
  <p class=hint>The wrapper's <code>padding: 24px 0</code> creates visible top/bottom space — the reliable modern approach.</p>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML marginheight Attribute — Modern CSS Replacement