mojwp.ru
Кейсы по заработку на сайте >>
Назад

Добавляем отступы сверху и снизу изображению в маркированном/нумерованном списке

Опубликовано: 22.12.2016
0
103

Довольно часто в клиентских шаблонах приходится сталкиваться с правкой отступов изображений внутри маркированного или нумерованного списках. Решим проблему при помощи CSS, чтобы изменения были применены и на уже запощенные статьи.

Данное решение применимо ко всем CMS и просто лендингам без CMS.

По коду это выглядит так:

Внимание! Я выпустил новую тему Romb для ваших статейников и блогов. Максимально быстрая по Google PageSpeed и максимальная оптимизация под SEO.

Либо так:

Обратите внимание, что в первом случае изображение внутри контейнера li, во втором случае за пределами контейнера li.

Добавим в файл стилей style.css (css.css или что-то подобное с расширением css в папке шаблона/лендинга):

В данном случае мы задали отступ картинке сверху и снизу в 10px. Вы уже регулируете под себя.

В некоторых случаях вы можете использовать картинки в списках у себя в сайдбаре. Если это так, то чтобы отступы не были применены на сайдбар, необходимо будет добавить в строку для CSS class или id тела контента. Зачастую это .wrap, .post, .content и прочие, в зависимости от верстальщика и его фантазии.

Чтобы вычислить class или id тела контента, вам понадобится воспользоваться консолью браузера, которую можно вызвать клавишей F12. ниже на скриншоте самая крайная левая стрелка указывает на кнопку инспекции элемента. Подводим затем курсор на центральную часть и кликаем левой клавишей мыши. Ниже, в окне кода html, уже вручную прокручиваем до родительского блока, чтобы он подсветился весь.

Добавляем отступы сверху и снизу изображению в маркированном/нумерованном списке
клик для увеличения

Наглядно использование консоли браузера в видео вы можете увидеть в статье Как сделать индивидуальный стиль для любого виджета.

Допустим у вас задан class="wrap". Тогда в файл стилей нужно будет вставить такое:

Если же у вас будет задан id="wrap", то:

Все.

Добавляем отступы сверху и снизу изображению в маркированном/нумерованном списке
5 (100%)
Проголосовало: 1

Давай, оцени статью!

Автор:
Виталий
Поделиться
Похожие записи
Комментарии:
Комментариев еще нет. Будь первым!
Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.