How to Add Margin Space Around AdSense Ads: 2 Ways

According to AdSense Porgram policies, there should be some adequate spacing between the ads and content of your website. For flash gaming sites, AdSense has clearly mentioned a distance of at least 150 pixels between the ads and the edge of a game.

This was done to improve the user experience on your website so that users don’t confuse content with the ads. If users will be able to identify ads clearly, there won’t be any accidental clicks and thus it also prevents you from violating AdSense Policies.

Now if you talk about responsive ads, they will automatically adjust their size, appearance, and format to fit available ad spaces. So it becomes necessary to define the spacing around them. This tutorial will guide you how to add margin space around AdSense ads on your website.

How to apply margin to AdSense ads

You can easily add spacing around AdSense ads on your website using CSS language. CSS has a property named margin which allows you to create space around HTML elements. You can also set the margin distinctly for each side of an element (top, right, bottom, and left).

There are two ways you can implement this on AdSense ad code –

Place AdSense code in a new div container

In this method, we will create a new div HTML container and place the AdSense ad code inside it. The CSS margins are added in the style tag of the <div> container. Here’s an example of the code –

<div style="clear: both; margin: 10px; text-align: center;">

<!--Your AdSense code here-->

</div>

Make sure to replace <–Your AdSense code here–> with your AdSense ad code and then add it on your website wherever you want to show the ads. We have also aligned the ads in the center of the div container. If you don’t want to do this, simply remove text-align: center; from the style tag.

The above code will apply 10px margin to all edges of the ads. You can change 10px to any size you want. If you want to set different margin for each side of the ads (top, right, bottom, and left), then you can use below code –

<div style="clear: both; margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; text-align: center;">

<!--Your AdSense code here-->

</div>

Apply margin by modifying AdSense ad code

Another way to apply margin around AdSense ads is by directly adding the CSS margin property in the style tag of the ad code. The below sample code shows how you can do this –

<ins class="adsbygoogle"
style="display:inline-block; margin:10px;"
data-ad-client="ca-pub-XXXXXXXXXXXXX"
data-ad-slot="XXXXXXX"></ins>

Make sure to add a semicolon (;) at the end of the previous CSS property in the style tag. Here we have applied 10px margin to all the edges of the ads. You can also specifically define the margin for each side as we did in the first method.

Does adding margin to ads violate AdSense Policies?

The simple answer to this question is NO. You are not violating the AdSense Program policies in any way. In fact, you are preventing ads from accidentally clicks. The ad code modification that you have done in the second method is also acceptable by Google AdSense.

• Also read: How to add AdSense ads below post title in Blogger

So these are two simple methods which can help you to add margin space around Google AdSense ads on your website. If you are facing any problem or you want to ask something related to this tutorial, let us know in the comment section below.