padding или margin?
Свойства padding и margin в чём их отличия и когда что использовать?
Что такое padding?
padding - задаёт внутренние отступы. Для примера представьте обычную деревянную коробку, так вот задавая значения padding вы как бы заполняете ее внутри пенопластом тем самым сжимая пространство внутри коробки.
Что такое margin?
margin - задает внешние отступы. В этот случае меняя параметры margin вы отталкиваетесь краями коробки от других внешних объектов не находящихся в ней.
Синтаксис
Существует несколько способов написания этих свойств: обычный и сокращенный. Обычную форму записи рассматриваемых свойств проще понять, потому что она похожа на все остальные стилевые записи.
Обычная запись:
padding-top: 20px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 20px;С другой стороны, сокращенная запись в CSS объединяет в себе все эти свойства в одно общее свойство padding.
Сокращенная запись:
padding: 20px 30px 10px 20px;Первое из четырех значений отступ сверху, затем отступ справа, снизу и слева.
padding: сверху справа снизу слева;
Эту запись можно сократить до трех значений, если левый и правый padding/margin одинаковы. Например, если верхний отступ равен 20px, левый и правый по 10px, а нижний — 30px, то можно использовать следующую форму записи:
padding: 20px 10px 30px;то же правило действует и для margin
margin: 20px 10px 30px;Сократим до 2 значений.
Если верхний и нижний padding/margin одинаковы, правый и левый padding/margin тоже одинаковы, то можно указывать только два значения. В этом примере у нас есть верхний и нижний отступы, которые равны 20px, а левый и правый отступы — по 10px. Наш CSS будет выглядеть следующим образом:
margin: 20px 10px;Только одно значение.
Последняя версия сокращенной записи для padding и margin содержит только одно значение. Эту запись можно использовать, когда все отступы (сверху, снизу, справа и слева) имеют одно и то же значение. Если бы мы хотели, чтобы все стороны имели отступы по 20px, то CSS выглядел бы следующим образом:
margin: 20px;