Как добавить отступ сверху/снизу картинке в маркированном/нумерованном списке

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

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

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

Какой-то пункт списка
Какой-то пункт списка

Какой-то пункт списка

Либо так:

Какой-то пункт списка
Какой-то пункт списка

Какой-то пункт списка

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

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

ul img, ol img {margin: 10px 0 10px 0;}

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

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

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

клик для увеличения

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

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

.wrap ul img, .wrap ol img {margin: 10px 0 10px 0;}

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

#wrap ul img, #wrap ol img {margin: 10px 0 10px 0;}

Всё.