Search code examples
amp-html

How to get rid of the 8px border in an <amp-ad> iframe


I am putting ads into my prototype AMP page, which I am serving from my own domain (not using an ad network). I am using something like their default remote.html, and my html code looks like this:

<head>
...
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
...
</head>
<body>
<amp-ad width='200px' height='200px' type='_ping_'></amp-ad>
</body>

Everything works, except that the <body> tag of the document that gets loaded into the resulting <iframe> has an 8 pixel margin, set by the "user agent stylesheet" (according to Chrome Dev Tools).

Nothing I can do seems to get rid of this: I've tried adding all sorts of styles to the body tag, and it has no effect. And, of course, AMP rules stop me doing any Javascript in the main document.

Is there a way of persuading AMP that when it creates the iframe, it should add a "frameBorder=0" directive (or similar) to the iframe?


Solution

  • Rather than trying to force the iframe to have a specific padding, try hiding the padding by making your div slightly to small to contain the padding and editing your CSS with overflow: hidden.