www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Имаги > Отступы вокруг Имаги

Отступы вокруг Имаги

контентовая версия  

Для любого Имаги можно задать пустые отступы по горизонтали и вертикали с помощью параметров hspace и vspace тега <IMG>. Особенно это актуально при обтекании рисунка контентом. В этом случае, чтобы контент не наезжал плотно на изображение, необходимо вокруг него добавляем пустое пространство (пример 1).

Пример 1. Добавление отступов вокруг Имаги

Валидный HTML
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<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

Рис. 1. Отступы вокруг Имаги

Тот же результат можно получить и с помощью стилей, используя стилевой атрибут margin, как показано в примере 2.

Пример 2. Добавление отступов с помощью стилей

Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<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.2009 Последнее обновление: 24.02.2009
Поиск по сайту
Имаги
Разделы
Теги по теме

IMG
Тег IMG предназначен для отображения на web-странице рисунков в графическом формате GIF, JPEG или PNG.

CSS (ЦСС) по теме

margin
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект