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

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

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

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

<ul>
<li>Какой-то пункт списка</li>
<li>Какой-то пункт списка
<p><img src="http://mojwp.ru/img1.jpg" alt=""/></li>
<li>Какой-то пункт списка</li>
</ul>

Либо так:

<ol>
<li>Какой-то пункт списка</li>
<li>Какой-то пункт списка</li>
<p><img src="http://mojwp.ru/img1.jpg" alt=""/>
<li>Какой-то пункт списка</li>
</ol>

Обратите внимание, что в первом случае изображение внутри контейнера 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;}

Все.

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.


Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2017 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 22.67MB | MySQL:67 | 0,435sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT https://wp-r.ru/plaginy/elt.html