Ваш промокод mojWPAds на плагин рекламы для WordPress >>

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

Довольно часто в клиентских шаблонах приходится сталкиваться с правкой отступов изображений внутри маркированного или нумерованного списках. Решим проблему при помощи 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/.


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

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

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

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

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

© 2011-2017 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 11.54MB | MySQL:103 | 0,226sec
Лучшие плагины для сайта WordPress
Магазин WordPress WP-R.ru
Я понял, не показывай больше.
Смотри мои обучающие видео на YouTube
Сайт использует cookie
Друг, не уходи!