Як оточити фото текстом і задати відступи тексту від картинки

Нічого складного в тому, щоб зробити обтікання картинки текстом, немає. У той же час, питання якої код потрібен для завдання відступів тексту від картинки або фотографії досить поширений у новачків, які тільки почали вести блог або опановувати основи html + css. У цій статті я приведу пару типових рішень для створення відступу картинки від тексту в вигляді коду html і css.

Спосіб 1: Вписуємо код відступу тексту для окремої картинки або фотки

Простий спосіб завдання обтікання картинки текстом, що не вимагає знань html і css.

Найчастіше зустрічається завдання, коли потрібно розташувати картинку зліва і щоб при цьому її зверху, праворуч і знизу оточував текст. Ще бажано, щоб текст існував не впритул до вставленої до статті фотографії або схемою, а трохи відступав від картинки. Як правило, більшість адмінок генерують код для вставки зображення, при якому картинка розташовується зліва, а текст починається не справа вгорі від картинки, в справа внизу, що зручно для крихітних іконок, але не підходить для великих картинок. Щоб зробити обтікання текстом для зображення, як в цьому способі, при вставці картинки в статтю потрібно написати такий код:

Наприклад, для вставки картинки, яку ви бачите в цій статті трохи вище, код html і css виглядає так:

Параметри відступу тут вказуються за годинниковою стрілкою, починаючи з відступу картинку зверху (3px), потім відступ від картинки праворуч (12px) і т.д.

Спосіб 2: Задаємо відступи відразу для всіх картинок в блоці одним класом css

Для використання цього способу знадобляться деякі знання основ верстки сайтів і бажання копатися в исходниках.

Якщо фотографії або інші зображення потрібно вставляти в тексти статей постійно, при цьому відступи між картинками і текстом завжди одні й ті ж, немає сенсу прописувати стиль css для кожної картинки окремо. Набагато зручніше один раз описати відступи від картинки для тексту та інших зображень, розміщених в такому блоці. Класичний варіант - вставка ілюстрацій в текст статті свого блогу.

Далі, в основному файлі стилів css (зазвичай style.css) знаходите ім'я потрібного класу (на прикладі його ім'я entry) і додаєте в файл опису стилів додатковий клас, що задає поведінку картинок (IMG) в необхідному блоці: