Как сделать отступы между картинкой и текстом в блогах Wordpress
Здравствуйте, дорогие друзья!
Сегодня первый день, когда температура понизилась аж до 35 градусов с 45, и мне сразу захотелось что -то делать. В буквальном смысле. Я даже сегодня зарядку с утра сделала. Это что-то да значит! Всю зиму систематически делала зарядку, даже иногда ходила в бассейн и на тренажеры, а как началась эта изнуряющая жара, то весь мой спортивный пыл моментально пропал. А потом и рабочий настрой плавно растаял…
Говорят, что резко повышать нагрузки нельзя 
, поэтому и сегодняшняя статья будет небольшой и поговорим мы с вами о том, как сделать отступы между картинкой и текстом в блогах Wordpress.
В Wordpress предусмотрено 4 вида выравнивания картинок:
1. Нет – в этом случае картинка является как бы частью строки. Этот вид выравнивания удобно использовать для совершенно маленьких картинок, например, таких 
, которые являются практически частью текста. Отступы в этом случае не используют.
2. Слева – картинка располагается слева от текста.
3. Центр – картинка должна располагаться по центру области вывода статьи. Текст находится сверху и снизу картинки (как в этой статье)
4. Справа – картинка выводится справа от текста.
Если мы просто используем выравнивание слева или справа, то картинка будет выглядеть так:
Т.е. она вплотную «прилипает» к тексту.
Для того, чтобы получить отступ между картинкой и текстом, делаем следующее:
1. В админке блога щелкаем на картинке. На ней появятся два значка – Редактировать изображение и Удалить изображение.
2. Щелкаем на Редактировать изображение.
3. Появится окошко. Если вы при загрузке картинки не выбрали вид выравнивания, то это можно сделать сейчас. Далее переходим на вкладку Расширенные настройки.
4. Прокручиваем окно расширенных настроек вниз и находим там поля Отступ (верт) и Отступ (гориз). В них вписываем какие-то значения. Я обычно ставлю 10. Нажимаем на кнопку Обновить.
5. Любуемся результатом:
Некоторые шаблоны дизайна блогов на Wordpress обладают такой особенностью, что когда мы выбираем выравнивание по центру, картинка хоть и располагается между фрагментами текста по вертикали, но по горизонтали все равно прижимается к левому краю. Такой глюк наблюдается в шаблонах Гудвина, в теме lifestyle и в некоторых других. Исправить это недоразумение тоже можно с помощью установки отступов. Достаточно поставить такой картинке отступ по вертикали, как она послушно размещается по центру, как ей и полагается.
Желаю успехов в оформлении блогов!
Марина Макарова
Марина, спасибо! Я мучилась… не знала
А я тебе еще раньше пыталась об этом рассказать, а ты так была занята новым дизайном блога, что не воспринимала мои потуги
А я делала отступы специально в отдельном редакторе а потом вставляла так картинку
Можно и так, но это намного дольше. Хотя, перед тем, как вставлять картинку в блог, ее все равно часто приходится редактировать – изменять размер, обрезать и т.п.
Наконец-то нашла то что надо. Сейчас же отредактирую все посты.
Спасибо, Марина! Умница!
Пожалуйста, Лидия!
Забавный блог, правда отступы текста от картинок делаются не только в вордпрессе, это стандартный дизайнерский тег любого сайта или стиля, он называется “margin”, обычно используется для css стиля (вот описание http://htmlbook.ru/css/margin.html )
Обычно чтобы были отступы текста от изображения, достаточно в обычном html виде добавить простой тег “margin:10px auto;” внутри тега картинки img после чего появится отступ. А выравнивание по левому или правому краю текста отвечает тег float, означающий обтекание текста с определённой стороны.
Да, Mitry, вы совершенно правы. Но дело в том, что большинство людей, которые ведут блоги, как огня боятся лезть в код файлов. Поэтому им гораздо легче пару раз кликнуть мышкой в админке блога для того, чтобы сделать отступы для картинок
Вы совершенно правы, Марина! зачем тратить время на изучение нового, и не всегда используемого материала, если можно воспользоваться готовым решением )))
Спасибо . Я очень долго искал эту информацию . Никак у меня не получалось поставить картинку слева в статье .
Спасибо, просто и без бубнов
Какая Вы умница! Просто и ясно объяснили, что и как сделать! До этого прочитал кучу советов на других сайтах и ничего не получилось, хотя вроде делал точно так, как советовали. Спасибо большое.
Пожалуйста
Спасибо , Марина за объяснения простых казалось бы вещей. Но иногда как раз такие простые вещи нужно долго где-то искать, допытываться у асов. Потом уже они делаются легко, но всегда бывает этот первый раз. Хочется оформлять свои тексты красиво. И шрифты, и отступы, и картинки, и цитаты. Иногда смотришь на так красиво оформленные тексты, и медленными шагами приближаешься к этому идеалу. Так что очень хорошо, когда есть такие помощники.
Пожалуйста, Людмила
Что Вы многие рекламируете шаблоны Гудвина? Честно, они отстойные. Бесплатные смотрел, много недочетов. Страшно связываться, если уже дешевый не может нормально сделать что тут говорить о платном. Чуть доработает бесплатный и все. Нашел шаблон бесплатный от WooThemes, он обыгрывает некоторые платные этого Гудвина.
На вкусна цвет, как говорится
Когда я начинала работать с WP два года назад, то шаблоны Гудвина были лучшими из тех, какие я смогла найти на тот момент, да саппорт был тогда у Гудвина очень хороший.
Здравствуйте Марина! Как делать отступы между картинкой и текстом – это понятно, я сегодня с этим уже разобралась. Но меня мучает немного другой вопрос, связанный с комментариями. У меня на блоге фотография частично перекрывает часть комментария. Как можно исправить данную оплошность?
Добро пожаловать на мой блог! С Большим удовольствием буду ждать новых отзывов и комментариев.
С Уважением, Яна!
Марина, в чем может заключаться моя проблема? Когда я в админ панели редактирую, то картинка выглядит как надо, Выравнивание слева, отступы по 10, а как только я перехожу на просмотр страницы, то выглядит все иным образом. Картинка, а в низу с отступом идет текст. Что мне предпринять?
Марина, а вы переключитесь в админке блога из режима “Визуальный редактор” в режим HTML и увидите, что ваша картинка вставляется внутрь тега заголовка, а должна идти сначала картинка![]()
, а потом
….
или наоборот
Спасибо огромное, некрасиво когда буквы липнут к картинке. Жаль раньше не знала. Скажите, а массово это исправить на сайте уже никак?
Катя, чтобы исправить отступы массово, нужно вносить изменения в файл style.css вашей темы блога
Спасибо, Марина! Кратко и понятно. Очень полезная функция))