Как сделать обтекание картинки текстом в html

В этой статье мы разберем варианты, как сделать обтекание картинки текстом. Всего есть несколько способов. Рассмотрим каждый из них. Для начала советую ознакомиться со статье html тег <img>, чтобы иметь базовые знания по изображениям на html страницах.

1. Обтекание с помощью стилей тега <img>

Картинку можно выровнять только оперируя со стилями CSS тега <img>. Как известно синтаксис тега допускает в атрибутах задавать выравнивание изображения:

<img align=VALUE src="foto1.jpg">

где VALUE может принимать значения

left — выравнивание по левому краю
right — выравнивание по правому краю
bottom — выравнивание по первой строке текста (это значение стоит по умолчанию)
top — выравнивание по верхней строке текста
middle — выравнивание по базовой строке текста

Например

<html>
<body>
<p>text text text text text text
<img align="left" src="foto1.jpg">
text text text text text text</p>
</body>
</html>

Вот как это будет выглядеть на странице:

Картинка как бы слиплась с текстом, поэтому сделаем отступы. Причем есть два варианта как это можно сделать.

Вариант 1.1. Через свойство CSS — hspace и vspace
Для этого в атрибутах тега <img> добавляем два значения:

<img hspace="10" vspace="10" align="left" src="foto1.jpg">

Вот как это будет выглядеть на странице:

Атрибут hspace задает горизонтальный отступ в пикселях, vspace - соответственно вертикальный

Вариант 1.2. Через свойство CSS — padding и margin
Для этого в атрибутах тега <img> добавляем два значения:

<img style="margin:10px 10px 0px 0px" align="left" src="foto1.jpg">

Вот как это будет выглядеть на странице:

Выглядит лучше за счет того, что мы не стали делать отступ слева. Вместо margin можно использовать padding, эффект будет аналогичный.

Использование свойства float вместо align

Помимо свойства align в атрибутах тега <img> в стилях есть CSS свойство float, которое также отвечает за выравнивание. Синтаксис следующий:

float:right; // Выравнивание по правой стороне
float:left; // Выравнивание по левой стороне

Например, если написать в предыдущем примере вывод картинки следующим образом:

<img style="margin:10px 10px 0px 0px; float:right;" src="foto1.jpg">

То это преобразуется в следующее:

Благодаря float можно задавать единый class для картинок, что очень даже удобно.

2. Обтекание изображения через <div>

Все изображения можно помещать в блоки <div>. А уже самому тегу <div> задать стиль с выравниванием относительно страницы и отступами.

//в стилях CSS:
	.img_class{
	margin: 10px 10px 0px 0px; 
	float: right;
	}

//в теле страницы body
<div class="img_class">
	<img src="foto1.jpg">
</div>

← Перейти в каталог html уроков и советов