Як зробити відступ тексту від картинки в wordpress 4
Текст прилип до картинки, виглядає не естетично, та й Новомосковскется погано. Що ж робити, як виправити ситуацію?
Давайте розглянемо, як вийти з цього становища, і встановити необхідні відступи тексту від картинки.
Насправді способів досить багато, навіть плагін спеціальний випустили, називається Advanced Images Styles. Так що прихильники плагіна можуть завантажити і встановити даний плагін. Про те, як встановлювати плагіни я вже писала.
Як отлепить картинку від тексту
Але ми ж не станемо вантажити блог зайвими плагінами, і застосуємо досить простий і зручний спосіб.
Існує кілька атрибутів, для встановлення відступів тексту від краю картинки. Розглянемо основні:
hspace = "10" - встановлює відступи по вертикалі (тобто з лівого і правого боку)
vspace = "10" - встановлює відступи по горизонталі
Ось такий код і картинка були до вставки:
Такий код і картинка стали після вставки:
Червоні рамочки я намалювала, щоб ви краще побачили, наскільки пікселів, і в яких місцях вийшов відступ. Як бачите, картинка зрушила від краю на 20 пікселів, і текст відступив від кордону картинки на 20 пікселів.
Значення можна вказувати будь-які, але мінус в тому, що відступи призначаються з усіх боків. Тобто, якщо ви вкажете значення hspace = "30", то не тільки текст відсунеться від картинки на 30 пікселів, а й картинка зрушиться від краю текстового поля на 30 пікселів. А це також не красиво.
Є більш зручний спосіб регулювати відступи. І допоможе нам в цьому властивість margin - яке встановлює відстані від зовнішнього кордону картинки (і не тільки картинки).
За допомогою властивості margin можна задати будь-які відступи. Причому вони можуть бути різні, для різних сторін, а можуть бути однакові. наприклад:
При вказівці такого значення, навколо картинки буде відступ в 10 пікселів з усіх боків. Можливо за допомогою цієї властивості, визначити відступ тільки для конкретно зазначених сторін, або задати різні за значенням відступи для кожної сторони.
Для того, щоб задати відступ для однієї зі сторін, потрібно вставити в код одне зі значень:
- margin-top: 20px; - Відступ від верхньої межі
- margin-left: 10px; - Відступ від лівої межі
- margin-right: 20px; - Відступ від правої межі
- margin-bottom: 10px; - Відступ від нижньої межі
Ось такий код зображення був до вставки:
Такий він став після вставки. Як бачите, я перед SRC вставила style = "margin-right: 30px;". І помістила картинку в DIV. Тобто оточила код -
Результат ви можете подивитися вище (картинка з питанням).
А як бути, якщо мені потрібні відступи з трьох сторін, і всі різні?
Наприклад я хочу розмістити картинку зліва, впритул до кордону документа, з невеликим відступом зверху, трохи більше знизу, і ще більше справа (між картинкою і текстом). Тоді я задам такі значення:
- margin: 10px 30px 20px 0;
- Перше значення - відступ зверху (10рх)
- друге значення - відступ справа (30рх)
- третє значення відступ знизу (20рх)
- четверте значення - відступ зліва (0).
Як ви помітили, починається з верхньої сторони, і йде за годинниковою стрілкою - права сторона, низ, ліва сторона.
А якщо мені потрібно розташувати картинку справа, з обтіканням тексту з лівого боку, я вкажу інші значення:
Ви можете сказати, що це все складно і клопітно, постійно при розміщенні картинки, шукати ці властивості, вставляти їх в код! Можу вас порадувати, можна все значно спростити, вказати дані властивості один раз в файлі CSS, а потім вказувати потрібний стиль при розміщенні картинки.
А як це все застосувати на практиці? Це все не дуже складно, і кожен з вас впорається!
Ось як це зробила я:
Причому значення ви можете вказати свої. І назвати ці стилі за своїм, тільки обов'язково англійськими літерами. Напімер «img_lev» - ви можете написати будь-зрозуміле для вас слово англійською мовою. Я так написала, позначивши картинку розташовану зліва. Відповідно «img_prav» - це картинка праворуч.
Таким же чином, можна оформляти картинки в рамки, для цього потрібно вставити в стилі код:
А цього зображенню, я вказала клас
Рамки можна зробити різні, досить тільки задати потрібні параметри. Можна додати кілька записів з різними назвами і параметрами. За допомогою таких значень ви можете налаштувати будь-яку рамку:
- dotted - рамка точками
- groove - врізана рамка
- ridge - вирізана рамка
- inset - втиснута рамка
- outset - опукла рамка
- dashed - пунктирна лінія
- double - подвійна лінія
- solid - суцільна лінія
Потім вставляєте скопійований код, замість зазначеного, і отримуєте потрібну рамку! А змінити ширину рамки можна збільшивши розмір в пікселях.
Тобто в файл стилів ви вставляйте не той код, що я вказала, а свій, відредагований, який потрібен вам!
Таким чином, за допомогою такого методу, можна зробити все зображення на сайті в одному стилі.
Тепер ви зможете самостійно зробити відступи для картинок, встановити рамку, оформити зображення в потрібному стилі.
PS. Купила два курси по заробітку, в наступній статті зроблю огляд даних курсів. Прошу вас, не купуйте курс по заробітку на Qivi гаманці. Дочекайтеся мого звіту.
З повагою, Ірина Баталова.
Пару раз відповідала, може на пошті завал.
Ігор, ви маєте рацію, завал кругом, і на пошті і на сервісах і в соцмережах. Добралася до блогу. Займуся ним впритул. Я ще паралельно роблю сучасну сторінку захоплення, за всіма правилами останньої моди. Теж багато часу йде. Як зроблю, розішлю передплатникам, за їх терпіння! 😉
Ірина, це буде щедрий подарунок 🙂
Ви маєте рацію, коли-то потрібно починати, так краще раніше, щоб потім не переробляти купу зайвої роботи.