Разделы

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

Метки:

Чтобы текст не прилегал плотно к изображению, вокруг него желательно добавить отступы. Пустое пространство вокруг картинки позволяет акцентировать внимание на изображении и сохранить читабельный текст. Для этой цели применяется универсальный стилевой атрибут margin, который одновременно задает нужное расстояние с каждой стороны. Действие margin зависит от числа аргументов: одно значение устанавливает одинаковые отступы сразу со всех сторон, а четыре значения последовательно определяют отступ сверху, справа, снизу и слева. Чтобы легче было запомнить, примите во внимание, что часовая стрелка тоже движется от 12 часов, потом на 3, далее на 6 и потом уже на 9 часов. Иными словами, последовательность аргументов атрибута margin напоминает движения часовой стрелки.

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

В примере 1 показано использование отступов для изображений.

Пример 1. Использование margin

<!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>
  <style type="text/css">
   IMG.leftpic {
    float: left; /* Выравнивание по левому краю с обтеканием */ 
    margin: 5px 10px 2px 0; /* Отступы вокруг */
   }
  </style>
 </head>
 <body>
    <p><img src="sketch.png" width="200" height="145" alt="Схема компоновки страниц" class="leftpic">
    Однажды лектор нарисовал схему компоновки страницы и распределил элементы в 
    разных частях экрана, которые соответствуют особенностям восприятия информации. 
    На беду лектора среди слушателей сидела девушка, которая мало того, что 
    была психологом по специальности, но и оказалась весьма дотошна. Вопрос слушательницы 
    был достаточно простой, но, как и на большинство простых вопросов, на него оказалось 
    сложно ответить: почему именно эта схема считается правильной?</p>
 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Отступы между текстом и картинкой

Рис. 1. Отступы между текстом и рисунком

В данном примере рисунок выравнивается по левому краю окна браузера за счет использования стилевого параметра float созначением left. При этом включается обтекание изображения текстом справа и снизу. Чтобы исключить «прилипания» текста к рисунку, к классу leftpic в примере добавляется атрибут margin, значения которого подобраны опытным путем.

Гость, 21.11.2008

Отлично) После того как прописал это не в теге img в style а в самом *.css - все запахало) Спасибо)

Разделы

Термины

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

Отправить комментарий