Свойства CSS: margin и padding

    Для управления значениями отступов вокруг элемента предназначен стилевой атрибут margin.
    Отступ - пространство от внешней границы текущего элемента до внутренней границ его родительского элемента.
     Например, текст на рисунке помещенный внутрь слоя, по отношению к нему выступает как дочерний элемент, а слой, соответственно, для текста будет родителем.
     В этом случае отсуп будет отсчитываться от рамки слоя до края текста. Отсупы не обязательно должны быть равными со всех сторон, по желанию разработчика их значение можно изменять по своему усмотрению.
     Если у элемента нет родителя, тогда отступом будет расстояние от границы до края окна браузера.

    Margin -это универсальный праметр, и в зависимости от числа значений он устанавливает отступы со всех сторон элемента или для каждой его стороны отдельно.
    Например, указав одно-единственное значение, получим в итоге отступы вокруг элемента. Если указаны два аргумента, то первый устанавливает горизонтальные отступы, второй - вертикальные.
     Три аргумента задает вначале отсуп от верхнего краяэлемента, затем горизонтальные, а в последнюю очередь отступ снизу.
     Четыре значения поочередно определяют отступ со всех сторон элемента, начиная с верхнего края и продолжая по часовой стрелке.

    Стилевой атрибут padding позволяет задать поля для всех или выборочных сторон элемента.
    Поле - расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничевающего его содержимое.
    Разница между полями и отступами заключается в том, что отсупы устанавливают пустое пространство вокруг элемента, а поля внутри.

Параметр padding действует аналогично margin, поэтому итоговый результат зависит от числа аргументов.
     Для указания полей на разных сторонах элемента можно воспользоваться свойствами padding-left, padding-right, padding-top, padding-bottom, они управляют величиной полей слева, справа, сверху и снизу соответсвенно.

      Если вы хотите исследовать свойства margin и padding в динамическом режиме, то предлагаю вам перети на страницу: "Взаимодействие формы с PHP программой на примере свойств CSS margin и padding"

Автор: Сергей Зарубин

Дата: 2011-03-30

Колличество просмотров: 5416

Tweet

Нравится

Комментарии к заметке: