наверх





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

padding



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

При установлении количества полей элемента имеется возможность задать указанное количество полей лишь с определенных сторон.
В качестве единиц измерения можно указать как пиксель (px), так и процентное соотношение (%).

#bar {
  padding: 12px;
}


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

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

#role {
  padding-bottom: 20px;
  padding-left: 5px;
}


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

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

#wrap {
  padding: 22px 13px 5px 6px; /* сверху 22px, справа 13px, снизу 5px, слева 6px */
}


margin



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

#side {
  margin: 4px;
}


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

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

Имеется возможность сокращенной записи значений для разных сторон, движение идет по часовой стрелке.

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

#side {
  margin: 12px 9px 4px 14px; /* сверху 12px, справа 9px, снизу 4px, слева 14px */
}






Поделиться
Text-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный text-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.