Отступы вокруг изображения
Для любого изображения можно задать пустые отступы по горизонтали и вертикали с помощью параметров hspace и vspace тега <IMG>. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не наезжал плотно на изображение, необходимо вокруг него добавить пустое пространство (пример 1).
Пример 1. Добавление отступов вокруг изображения
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выравнивание по левому краю</title>
</head>
<body>
<p><img src="sample.gif" width="50" height="50" hspace="10" vspace="10" align="left" alt="Пример">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Результат данного примера приведен ниже (рис. 1). Текст отступает от изображения на 10 пикселов.
Рис. 1. Отступы вокруг изображения
Тот же результат можно получить и с помощью стилей, используя стилевой атрибут margin, как показано в примере 2.
Пример 2. Добавление отступов с помощью стилей
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование стилей</title>
</head>
<body>
<p><img src="images/sample.gif" width="50" height="50" style="float: left; margin: 10px 15px 20px 7px" alt="Пример">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Удобство применения стилей заключается в том, что можно задать разные отступы для каждой стороны изображения. Для этого надо перечислить через пробел значения отступов, начиная с верхнего. В примере 2 верхний отступ задается как 10 пикселов, правый — 15, нижний — 20, а левый — 7 пикселов. Если все отступы должны быть одинаковы, поставьте только одно значение.
| Статья опубликована: 06.09.2005 | Последнее обновление: 24.02.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Дима
19.06.2007
<tr>
<td border="0">
<img src="images/logo/1.JPG" border="0"></a>
<a href="index.php"><img src="images/logo/main.jpg" border="0" HSPACE="0" VSPACE="0"></a>
<a href="index.php"><img src="images/logo/price.jpg" border="0" HSPACE="0" VSPACE="0"></a>
<a href="index.php"><img src="images/logo/dostavka.jpg" border="0" HSPACE="0" VSPACE="0"></a>
<a href="index.php"><img src="images/logo/oMAgazine.jpg" border="0" HSPACE="0" VSPACE="0"></a>
<img src="images/logo/2.JPG" border="0" HSPACE="0" VSPACE="0"></td>
</tr>
</table></td>
</tr>
И все равно пробелы есть...где ошибка?
ЛоремИпсум
19.06.2007
ЛоремИпсум добавлено
19.06.2007
Кед
14.10.2007
...
<img src="images/logo/1.JPG" border="0"></a><a
href="index.php"><img src="images/logo/main.jpg"
border="0" HSPACE="0" VSPACE="0"></a><a href="index.php"><img
src="images/logo/price.jpg" border="0" HSPACE="0"
VSPACE="0"></a><a href="index.php"><img
src="images/logo/dostavka.jpg" border="0" HSPACE="0"
VSPACE="0"></a><a href="index.php"><img
src="images/logo/oMAgazine.jpg" border="0" HSPACE="0"
VSPACE="0"></a><img src="images/logo/2.JPG"
border="0" HSPACE="0" VSPACE="0"></td></tr>
...
т.е. не делайте перевод строки в коде html-страницы
так как это трактуется браузером как пробел.
LitR
25.03.2008