Плагины, темы и скрипты
собственной разработки

Обратная связь

Как добавить отступ снизу/сверху для объявлений AdSense

В этой статье мы рассмотрим проблему "слипания" рекламных объявлений AdSense с текстом и по итогу вы научитесь задавать отступ сверху и снизу от рекламы.

Вот о чем речь:

как задать отступ объявлению AdSense от текста

Увеличить

Код рекламы объявления AdSense был вставлен на сайт как есть, т.е. как дал сам Google. Верстка темы сайта не предполагала равномерный отступ абзацев сверху и снизу, поэтому реклама встала впритык к тексту по нижней границе.

Исправим ситуацию. Все делается за пару секунд, но статью расписал поподробнее, чтобы вы поняли технику и смогли применять в других ситуациях.

Задаем отступ рекламы AdSense снизу/сверху

Вот так выглядит стандартный код рекламы AdSense объявление в статье:

Увеличить

Глядя на данный код мы видим, что у нас есть несколько способов задать отступ. Остановимся на самых простых и корректных с точки зрения "красоты кода" 😉

Способ 1: задаем отступ в каждое объявление

Использовать будем параметр CSS под названием margin - внешний отступ.

margin: 0 0 15px 0;

Где цифры означают margin: отступ_сверху отступ_справа отступ_снизу отступ_слева. В нашем случае это: 0 сверху, 0 справа, 15px снизу и 0 слева. Можете сами задать нужные, не забывая указывать что это px (пиксели).

В каждом объявлении AdSense есть заданные уже самим Google некоторые стили. Добавим к ним наш margin (не нарушает правила):

Увеличить

Подчеркнул красной линией где был вставлен параметр margin со своими значениями. Таким образом делаем для всех объявлений.

Способ 2: задаем отступ для всех объявлений автоматически

Опять же, в объявлениях уже есть class="adsbygoogle", которому мы можем назначить нужный нам параметр в файле стилей самой темы вашего сайта (style.css, css.css и прочие названия). Делаем это, добавляя в самом конце файла стилей строку:

ins.adsbygoogle {margin: 0 0 15px 0;}

Теперь данный отступ снизу появится на всех объявлениях, у которых задан class="adsbygoogle". Не забудьте после внесения изменений почистить кеш плагин и кеш браузера (CTRL+F5 несколько раз).

Результат

Увеличить

Реклама не слипается с текстом. Вместо 15px можно задать 25px и сделать отступ еще больше (или любую другую цифру).

Добавить комментарий

наверх