Skip to content
 

Как сделать отступ текста от картинки в WordPress 4

Недавно мне в комментариях задали вопрос, как сделать отступ текста от картинок в WordPress. Дело в том, что в новых версиях WordPress, исчезло поле для выставления отступов в ручную.

otstup

Текст прилипший к картинке, смотрится не эстетично, да и читается плохо. Что же делать, как исправить ситуацию?

otstup

Давайте рассмотрим, как выйти из этого положения, и установить необходимые отступы текста от картинки.
На самом деле способов довольно много, даже плагин специальный выпустили, называется Advanced Images Styles. Так что сторонники плагина могут скачать и установить данный плагин. О том, как устанавливать плагины я уже писала.

Как отлепить картинку от текста

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

hspace=»10″- устанавливает отступы по вертикали (то есть с левой и правой стороны)
vspace=»10″- устанавливает отступы по горизонтали

При добавлении картинки, открыть редактор в режиме «Текст», и вставить в код нужный атрибут, указав необходимый отступ.

Вот такой код и картинка были до вставки:

<img class=» size-full wp-image-2078 alignleft» src=»адрес картинки» alt=»graniza» width=»250″ height=»349″  />

otctyp_kartinki

Такой код и картинка стали после вставки:

<img class=» size-full wp-image-2078 alignleft» style=»border: 10px solid white; margin: 10px;» src=»адрес картинки» alt=»graniza» width=»250″ height=»349″ hspace=»20″ vspace=»0″ />

otctyp ot texta

Красные рамочки я нарисовала, чтобы вы лучше увидели, насколько пикселей, и в каких местах получился отступ. Как видите, картинка сдвинулась от края на 20 пикселей, и текст отступил от границы картинки на 20 пикселей.

otctup

Значения можно указывать любые, но минус в том, что отступы назначаются со всех сторон. То есть, если вы укажете значение hspace=»30″, то не только текст отодвинется от картинки на 30 пикселей, но и картинка сдвинется от края текстового поля на 30 пикселей. А это также не красиво.

Есть более удобный способ регулировать отступы. И поможет нам в этом свойство margin — которое устанавливает расстояния от внешней границы картинки (и не только картинки).

При помощи свойства margin можно задать любые отступы. Причём они могут быть разные, для разных сторон, а могут быть одинаковые. Например:

margin: 10px;

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

Для того, чтобы задать отступ для конкретной стороны, нужно вставить в код одно из значений:

  1. margin-top: 20px; — Отступ от верхней границы
  2. margin-left: 10px; — Отступ от левой границы
  3. margin-right: 20px; — Отступ от правой границы
  4. margin-bottom: 10px; — Отступ от нижней границы

Вот такой код изображения был до вставки:

<img class=»alignleft  wp-image-2079″ src=»адрес картинки» alt=»otctup» width=»213″ height=»305″ />

Такой он стал после вставки. Как видите, я перед SRC вставила style=»margin-right: 30px;». И поместила картинку в DIV. То есть окружила код  — <div> код картинки</div>.

<div><img class=»alignleft  wp-image-2079″ style=»margin-right: 30px;» src=»адрес картинки» alt=»otctup» width=»213″ height=»305″ /></div>

Результат вы можете посмотреть выше (картинка с вопросом).

А как быть, если мне нужны отступы с трёх сторон, и все разные?

Например я хочу разместить картинку слева, вплотную к границе документа, с небольшим отступом сверху, чуть больше снизу, и ещё больше справа (между картинкой и текстом). Тогда я задам такие значения:

  • margin: 10px 30px 20px 0;
  1. Первое значение — отступ сверху (10рх)
  2. второе значение — отступ справа (30рх)
  3. третье значение отступ снизу (20рх)
  4. четвёртое значение — отступ слева (0).

Как вы заметили, начинается с верхней стороны, и идёт по часовой стрелке — правая сторона, низ, левая сторона.

А если мне нужно расположить картинку справа, с обтеканием текста с левой стороны, я укажу другие значения:

  • margin: 10px 0 20px 30px;

Вы можете сказать, что это всё сложно и муторно, постоянно при размещении картинки, искать эти свойства, вставлять их в код! Могу вас обрадовать, можно всё значительно упростить, указать данные свойства один раз в файле CSS, а потом указывать нужный стиль при размещении картинки.

А как это всё применить на практике? Это всё не слишком сложно, и каждый из вас справится!

Может быть вы заметили, что в новом редакторе изображений, появилось новое поле: «СSS-класс изображения». Благодаря этой строке, мы можем задавать различные стили картинкам, в один клик.

redaktor

Поработать придётся один раз. Вставить в файл стилей нужные значения, а потом при добавлении картинки в статью, зайти в редактор, и указать тот стиль, который вы хотите задать данной картинке.

Важно! Указывать название стиля нужно без точки впереди! То есть, если в файле стилей указано — «.img_lev», то в редакторе пишем просто — «img_lev», без точки. Таким образом мы задаём картинке указанный стиль.

Для начала открываем файл стилей CSS — в административной панели «внешний вид» — «редактор». И вставляем туда такой код, задающий отступы текста от картинки:

.img_lev {
margin: 10px 30px 20px 0;
}
.img_prav {
margin: 10px 0 20px 30px;
}

Вот как это сделала я:

border_fail_css

 

Причём значения вы можете указать свои. И назвать эти стили по своему, только обязательно английскими буквами. Напимер «img_lev» — вы можете написать любое понятное для вас слово на английском языке. Я так написала, обозначив картинку расположенную слева. Соответственно «img_prav» — это картинка справа.

Таким же образом, можно оформлять картинки в рамки, для этого нужно вставить в стили код:

.ramka1{border: 5px double #0000FF;}
.ramka2{border: 3px; dashed #0000FF;}

ramka_dlja_kartinkiСловом «ramka», я обозначила что картинка будет в рамке. Ramka1 – Это рамка шириной в 5 пикселя, двойная линия, цвет синий. Ramka2 — это рамка шириной в 3 пикселя, пунктирная линия, цвет синий. Затем, при добавлении картинки, я нажала — «редактировать» (на карандаш), затем — «дополнительные настройки», и в строку «CSS-класс изображения» — написала для одной картинки — «ramka2«, (см. картинку слева) а для другой —  «ramka1«. На результат вы можете посмотреть выше. Картинки в рамках!

А данному изображению, я указала класс

«img_lev». В редакторе отступ был почему то невидим, но при просмотре публикации в отдельном окне, отступ есть! Правда не большой, но это легко регулируется. Достаточно один раз настроить всё как надо, и затем уже редактировать изображения в один клик.

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

  • dotted — рамка точками 
  • groove — врезанная рамка
  • ridge — вырезанная рамка
  • inset — вдавленная рамка
  • outset — выпуклая рамка
  • dashed — пунктирная линия
  • double — двойная линия
  • solid — сплошная линия

Легко меняется цвет, на нужный. Для этого наберите в поиске «узнать код цвета», и вам откроются страницы, на которых можно найти нужный цвет, и скопировать его код. Я узнаю HTML код нужного цвета на этой странице — http://www.stm.dp.ua/web-design/color-html.php

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

То есть в файл стилей вы вставляйте не тот код, что я указала, а свой, отредактированный, который нужен вам!

Таким образом, при помощи такого метода, можно сделать все изображения на сайте в одном стиле.

Теперь вы сможете самостоятельно сделать отступы для картинок, установить рамку, оформить изображение в нужном стиле.

PS. Купила два курса по заработку, в следующей статье сделаю обзор данных курсов. Прошу вас, не покупайте курс по заработку на Qivi кошельке. Дождитесь моего отчёта.

С уважением, Ирина Баталова.

Я хочу быть в курсе событий на сайте!

Подпишитесь прямо сейчас, и получайте обновления на свой E-Mail:

Ваш E-Mail в безопасности

Google

68 комментариев

  1. Ирина, отличный совет. У меня часто возникали проблемы по этому поводу. Теперь буду знать как сделать чтобы текст не был очень близко к картинке.

    • Спасибо, Александр! Как ты думаешь, новичкам будет понятно, как сделать отступы, или нет? То есть доступно ли я написала? Когда писала статью, то ловила себя на мысли, что мне было сложно описывать всё просто и понятно для всех. :mrgreen:

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

        • Спасибо за ответ. На самом деле разобраться в кодах достаточно просто. Я быстро поняла структуру HTML кодов, да и CSS — не сложная и довольно занимательная штука. Я как раз занимаюсь изучением. Столько возможностей даёт знание стилей!

          • Ирина, а что Вы там учите? Литература какая то или видео уроки?

          • Не то и не другое. Читаю в интернете о каждом свойстве или атрибуте. Например, прочитала о свойстве margin, изучила как его применять, записала в блокнот, у меня для этого есть файл в формате html. Назвала его уроки по html. Правда уже по CSS пошли, но я продолжаю всё в один файл записывать. На следующий день изучаю следующее свойство или атрибут. И так стараюсь каждый день узнать что то новенькое, и записать в свой файл. По степенно приходит понимание, а с практикой и знания.

          • Ирина, я о таких вещах как «margin» вообще впервые слышу. И вообще с кодами не дружу. Очень туго мне всё это даётся. Но я всё же стараюсь.

          • А с «padding» дружите? 😉 Со временем разберётесь в кодах.

          • Нет Ирина не дружу. А что это такое этот «padding»?

          • Это тоже отступы, только не снаружи объекта, а внутри его.

          • Ирина, я же говорю Вам, что с кодами у меня туго. Если мне что то нужно сделать, то обычно нужный тег или действие ищу видео и по видео уроку делаю.

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

          • Хорошо Ирина, если вдруг понадобится помощь в кодах, то первым делом пойду к вам на сайт, а потом уже в яндекс.

          • Вот и договорились! 😉

      • Ирина,все понятно описано.
        Разжевано и в рот положено.

      • Выскажу, с вашего позволения, мнение новичка — все понятно 🙂

      • Anna:

        Ирина, я как раз из тех, кто не очень разбирается в кодах, но всё поняла, что вы написали и даже записала себе основные коды, которые нужно вставлять…Так что статья написана грамотно и полезна однозначно…С уважением, Анна.

      • Anna:

        Ирина, здравствуйте! Прочитала всё с большим интересом…Я скажу честно,что сразу после прочтения статьи не смогу всё это сделать…Нужно время, чтобы ещё раз всё изучить…Главное, нужно быть очень внимательной при выполнении данной операции…И как вы всё это понимаете? Очень надеюсь, что я тоже научусь этому…С уважением, Анна. 🙂

        • Анна, новичкам трудно всё понять и запомнить, но когда делаешь действие по нескольку раз, то всё становится понятным. Вам и не нужно вначале стараться понять или запомнить, главное делать всё внимательно по шагам, ничего не пропуская, и всё получится.

          • Anna:

            Да,я тоже в это верю, иначе бы не занималась этим вопросом…С уважением, Анна. 🙂

  2. Ирина, здравствуйте! Давненько у Вас не был, правда на то были объективные причины 😐 Да, у меня домен поменялся, так что исправьте если что. С уважением Андрей. :mrgreen:

    • Андрей, не могу перейти на твой блог, пишет Яша, что нет такой страницы. А какая причина смены домена? И не скажется ли это на продвижении и посещаемости?

      • Ирина, переходите вот по этой ссылке kosolapovblog.ru/nachalo-novoy-zhizni.html

        • Андрей, всё равно не могу попасть на блог. Яндекс пишет — страница не найдена. Но я думаю, что тут причина кроется в другом. Я так же не могу попасть на блог Юрия Йосифовича. Скорее всего это какие то ограничительные меры. Типа санкций для Крыма. Может быть я ошибаюсь, нужно поискать в интернете ответ на вопрос — вводили ли какие то меры по блокировке блогов на Украине. Или ограничения для Крыма.

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

          • Андрей, а жители РФ нормально посещают ваш блог? Просто я хочу уточнить для себя, запретили вход только с территории Крыма, или со всей Россией.

          • Ирина,нет никаких проблем,я свободно захожу и ранее заходил на блог Андрея.
            А у Юрия,на блоге чуть ли не каждый день и не каких проблем.

  3. Ирина, если сможете, то зайдите к Александру Каратаеву на эту статью. blog.ddw.kz/google-opustit-v-vyidache-nemobilnyie-saytyi.html Если нет, то напишите мне на почту и я Вам вышлю дубликат его статьи. В ней как раз есть решение Вашей проблемы.

    • Спасибо, Андрей! Я читала статью, я его подписчица на статьи, и это в ней Александр в основном и описывает наше с ним общение. Это он мне помогал, и я установила расширение в Гугл хром. А вот веду блог я в Яндекс браузере, и с него пыталась попасть к вам на блог. А с гугла захожу нормально. Мне просто интересно почему блокируют посещение украинских блогов посетителям с Крыма. Ну ладно Американские сервисы запрещают нам посещать их сайты, а кто наложил запрет на посещение Украинских сайтов?

  4. Спасибо, Ирина за полезную информацию. А то иногда и в самом деле нужен отступ. а как сделать — не знаешь. Поэтому обычно картинку ставлю по центру. Но потихоньку в кодах начинаю разбираться. Приходится.

  5. Ирина, у вас опять интернет появился? пару дней назад заходил не было моих комментариев, а вот зашёл, смотрю появились.

    • Это временный глюк был. 🙂

        • Саня я просто шуточное предположение сделал 🙂

          • Теперь понятно.

          • Саня,мы же не первый день общаемся.Уже должны друг друга понимать 🙂

          • Игорь, а что Ирина отзывается на комментарии? А то мне не отвечает. Она уже решила проблему с интернетом?

          • Александр, проблема с интернетом решена. Я уже несколько дней в интернете, но на комментарии пока не отвечала, слишком их много скопилось, руки не доходят. Пока разобралась с почтами и сервисами для заработка. Теперь буду уделять время блогу, но отвечать буду только на новые сообщения. Поймите меня правильно, если отвечать на все за два месяца, то времени не останется на новые статьи. А мне нужно наполнять блог контентом. Спасибо вам огромное, что заходили ко мне на блог, и оставляли комментарии. Я по возможности постепенно буду отвечать на вопросы ранее заданные лично мне.

          • Пару раз отвечала,может на почте завал.

          • Игорь, вы правы, завал кругом, и на почте и на сервисах и в соцсетях. Добралась до блога!!! Займусь им вплотную. Я ещё параллельно делаю современную страницу захвата, по всем правилам последней моды. Тоже много времени уходит. Как сделаю, разошлю подписчикам, за их терпение! 😉

          • Ирина,это будет щедрый подарок 🙂

  6. Кстати молодежь,всех с праздником.
    Удачи.здоровья и успехов во всем.

  7. Anna:

    Ирина, вы ответили на мой вопрос по картинкам …Спасибо, правда, мне по уровню моих знаний, нужно ещё раз почитать статью и потихоньку попробовать это сделать…Я очень плохо разбираюсь в кодах и панически боюсь заходить в них, чтобы не навредить блогу из-за своей неопытности…Статья получилась просто шикарная…Умница вы большая…Ваша позитивная энергетика прямо сквозит сквозь ваши комментарии…Я уверена, что у вас всё будет хорошо, вы это заслужили…С уважением, Анна. 🙂

    • Анна, я тоже вначале боялась править код, но потом это пройдёт. Я делаю так: открываю сайт на двух вкладках, в одной вкладке правлю и не закрываю редактор, а во второй вкладке просматриваю результат, если сайт пропал, то я быстренько в редакторе возвращаю всё на место, как было. И перед правкой сохраняю бекап сайта. Хотя в стилях вносить изменения не критично, сайт не пропадёт, могут поменяться элементы дизайна, а сайт будет на месте.

      • Anna:

        Ирина, спасибо, что ответили и успокоили меня в какой-то мере…Буду пробовать, ведь нужно же когда-то начинать, а то так можно всё просидеть и ничего не изменить на блоге…Попробую использовать ваш вариант работы для внесения изменений в код блога…А пока попробую вставить ваши коды для отступов от картинки в стили…Беру статью в закладки, чтобы пошагово сделать всё за вами…С уважением, Анна. 🙂

  8. Anna:

    Ирина, здравствуйте! Всё получилось у меня…Спасибо вам за помощь…С уважением, Анна. 🙂

  9. Anna:

    Ирина, здравствуйте! С Рождеством Христовым Вас!!!! Пусть эти дни будут спокойными и благодатными…С уважением,Анна.

  10. Благодарю, Ирина, за понятную статью. Я у себя тут же сделала отступ. И взяла Ваш сайт в закладки. Очень хорошо объясняете.Успехов Вам во всём!
    С уважением, Алина Таранец, автор блога ПУТИ К ЗДОРОВЬЮ

  11. Anna:

    Вот видете, Ирина, как ваши статьи, советы и рекомендации помогают новичкам справиться со своими, как им кажется, неразрешимыми проблемами…И это приятно и здорово!! Я очень рада за вас!Вы — просто клад для нас!! С уважением, Анна. 🙂

  12. Благодарю, отличный совет.
    А если укоротить статью до самого того, что нужно (внизу) то будет еще лучше. Почему? Автоматика WordPress исказила кавычки, и вместо hspase=»10″ мы видим здесь hspace=«10″ и такой код, конечно, не работает.

  13. Интересная статья.А вот если бы еще к ней и обучающее видео, то цены бы ей не было 🙂

Написать отзыв

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: