Урок: отступы и поля в css. что такое margin и padding?

[AriCosmo Участник]

Доброго времени суток дорогим жителям форума или гостям, с вами AriCosmo.
Друзья приношу извинения, что так долго не было тем по CSS.(были дела)
В данном уроке мне хотелось бы написать о отступах и полях в CSS,
подмечу, что данный урок является очень важным и за частую новички без данных знаний парятся.)
Начнём:

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

Единицами измерения могут быть пиксели (px) или процентное соотношение (%).

 #block {
padding:12px;/* отступ от границ блока до содержания - со всех сторон будет 12 пикселей */
}

Есть возможность указать поле только с одной определённой стороны:
padding-top - свойство, создающие поля сверху.
padding-right - свойство, создающие поля справа.
padding-bottom - свойство, создающие поля снизу.
padding-left - свойство, создающие поля слева.

#block {
padding-bottom:25px;/* снизу поле 25 пикселей */
padding-left:15px;/* слева поле 15 пикселей */
}

Как Вы заметили, если указывать таким образом поля с 2-х или 3-х сторон, то получится длинный код. Для этого существует сокращённая запись свойства padding. В ней поочерёдно указывается все 4 значения - от каждого края в одну строчку, движение идет по часовой строке, начиная с верхнего:

padding: ВерхнийОтступ ПравыйОтступ ОтступСнизу ОтступСлева;

#block {
padding:25px10px15px6px;/* сверху 25px, справа 10px, снизу 15px, слева 6px */
}

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

#block {
margin:4px;
}

Для указания отступов лишь с определенных сторон существуют следующие свойства:

margin-top - свойство, создающие отступы сверху.
margin-right - свойство, создающие отступы справа.
margin-bottom - свойство, создающие отступы снизу.
margin-left - свойство, создающие отступы слева.

Как и у свойства padding, у margin тоже имеется возможность сокращенной записи значений для разных сторон. Движение идет по часовой стрелке, с верхнего поля:

margin: ВерхнийОтступ ПравыйОтступ ОтступСнизу ОтступСлева;

#block {
margin:15px10px5px25px;/* сверху 15px, справа 10px, снизу 5px, слева 25px */
}

Спасибо за внимание!

 

[Алексей Жуков Участник]

Спасибо!

 

[Wsk Участник]

Статья хорошая, интересная, но ведь тоже самое есть во всех учебниках, привел бы примеры использования, различные эффекты, чем могут быть полезны.
Например, бывает блок с баннерами надо передвинуть куда-то, и юзать такие элементы очень удобно )

 

[AriCosmo Участник]

Статья хорошая, интересная, но ведь тоже самое есть во всех учебниках, привел бы примеры использования, различные эффекты, чем могут быть полезны.
Например, бывает блок с баннерами надо передвинуть куда-то, и юзать такие элементы очень удобно )

Эх чувак, было бы время) А так будем стараться))