Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Margin что такое в css

Урок 6. Отступы и поля в CSS. Что такое margin и padding?

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

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: 25px 10px 15px 6px; /* сверху 25px, справа 10px, снизу 15px, слева 6px */ }

Свойство margin, в отличии от padding, устанавливает величину отступа между границами элементами. Если элемент является дочерним, то отступом является пространство от границы элемента до внутреннего края границы родителя. Если у элемента отсутствует родитель, то отступом считается установленное свойством свободное пространство до краев рамки окружающих элементов. #block { margin: 4px; } Для указания отступов лишь с определенных сторон существуют следующие свойства:

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

margin-right - свойство, создающие отступы справа. margin-bottom - свойство, создающие отступы снизу. margin-left - свойство, создающие отступы слева. Как и у свойства padding, у margin тоже имеется возможность сокращенной записи значений для разных сторон. Движение идет по часовой стрелке, с верхнего поля: margin: ВерхнийОтступ ПравыйОтступ ОтступСнизу ОтступСлева; #block { margin: 15px 10px 5px 25px; /* сверху 15px, справа 10px, снизу 5px, слева 25px */ }

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

Предыдущая статья Урок 5. Выравнивание текста в CSS Следующая статья Урок 7. Рамка элемента CSS

Свойство CSS margin: внешние отступы элементов

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

Синтаксис свойства

Существует общее свойство CSS margin, с помощью которого можно указать значение сразу всех отступов, а также четыре отдельных свойства для каждой стороны:

margin-left;
margin-right;
margin-top;
margin-bottom.

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

parent { width: 500px; height: 100px; } child { margin-left: 10%; // 500px * 10% = 50px margin-top: 10%; // 500px * 10% = 50px }

В CSS margin может быть отрицательным.

При использовании группового синтаксиса необходимо передать от одного до четырех параметров, перечисляя стороны в правильном порядке.

Один: для всех сторон сразу.
Два: для верха и низа и отдельно для боковых сторон.
Три: для верха, боков и низа.
Четыре: перечисление сторон по часовой стрелке, начиная с верхней.

element { margin: 20px; } element { margin: 20px 30px; } element { margin: 20px 30px 40px; } element { margin: 20px 30px 40px 50px; }

Алгоритмы вычисления отступов

Свойство CSS margin не наследуется и по умолчанию равно нулю. Казалось бы, изначально ни один элемент на странице не должен иметь внешних отступов, но это не так. Браузеры по собственной инициативе устанавливают форматирование для ряда тегов, например, списков. Важно учитывать это при верстке.

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

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

Схлопывание маргинов

На картинке представлены два расположенных друг под другом элемента с установленными внешними отступами. В первом варианте нижний и верхний маргины блоков объединяются, во втором - складываются. Какой тип поведения кажется более логичным?

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

Вынос маргина за пределы родителя

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

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

Если родитель имеет рамку, паддинг или свойство overflow, равное hidden или scroll, вынос маргина не происходит.

Выравнивание по центру

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

element { width: 400px; margin: 0 auto; }

При этом происходит перераспределение свободного пространства поровну с обеих сторон от элемента. Это работает только для узлов блочного типа с конкретно заданной шириной. Если не установить размер, блочный элемент растянется на весь контейнер, не оставляя свободного места для отступов.

Свойства PADDING и MARGIN и как их использовать

Сегодня мы поработаем над пониманием разницы между HTML padding (внутренний отступ) и margin (внешний отступ) в CSS. Но сначала разберемся с их синтаксисом. Существует несколько способов написания этих свойств: обычный и сокращенный:

Padding и Margin в CSS

Обычную форму записи рассматриваемых свойств проще понять, потому что она похожа на все остальные стилевые записи:

Обычная запись:

padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;

С другой стороны, сокращенная запись в CSS объединяет в себе все эти свойства в одно общее свойство «padding«.

Краткая запись:

padding: 10px 20px 40px 10px;

У padding и margin есть четыре значения: верхнее, правое, нижнее и левое. В сокращенной записи, показанной выше, так же задаются четыре значения, отделенных друг от друга пробелом. Первое из четырех значений отступ сверху, затем отступ справа, снизу (padding bottom HTML) и слева:

padding: TOP RIGHT BOTTOM LEFT; (padding: сверху справа снизу слева)

Эту запись можно сократить запись до трех значений, если левый и правый padding/margin одинаковы. Например, если верхний отступ равен 30px, левый и правый по 10px, а нижний — 40px, то можно использовать следующую форму записи:

Сокращаем до двух значений!

Если верхний и нижний padding/margin одинаковы, а правый и левый padding/margin тоже одинаковы, то можно указывать только два значения. В этом примере у нас есть верхний и нижний отступы, которые равны 10px, а левый и правый отступы — по 20px. Наш CSS будет выглядеть следующим образом:

padding: TOP/BOTTOM RIGHT/LEFT; (padding: сверху/снизу справа/слева) padding: 10px 20px;

Только одно значение!

Наша последняя версия сокращенной записи для padding и margin HTML содержит только одно значение. Эту запись можно использовать, когда все отступы (сверху, снизу, справа и слева) имеют одно и то же значение. Если бы мы хотели, чтобы все стороны имели отступы по 20px, то CSS выглядел бы следующим образом:

Совет!

Когда какой формат записи использовать? Например, если нужно задать элементу только нижний отступ, я буду использовать обычную запись, так как нужно применить свойство только к одной стороне: padding-bottom: 30px;

Как работать с PADDING и MARGIN

Между этими двумя свойствами существует ощутимая разница. Padding используется для задания пространства внутри контейнера HTML-элемента. Margin используется для задания пространства вокруг внешней границы элементов.

Представьте, что padding надевает на вас зимнее пальто. Пальто часть вас, но если бы я бросил краску в вас, она покрыла бы более широкую поверхность чем, если бы на вас не было этого пальто.

Также можно думать о padding как о наполнителе в картонной коробке. Когда вы наполняете коробку пенопластом, вы удерживайте им содержимое на расстоянии от краев коробки. Padding в CSS делает то же самое.

Теперь подумайте о margin как о невидимом силовом поле вокруг вас. Силовое поле ограждает другие вещи от вас. Возвращаясь к примеру с пальто и краской, если бы я бросил в вас краску, и она была бы в состоянии пройти через силовое поле, то она по-прежнему покрыла бы только вас и ваше пальто.

PADDING и MARGIN на примере сайта

Рассмотрим свойства на примерах с элементами. Мы начнем с абзаца (тега

), затем добавим к нему цвет фона и добавим отступ 30px с каждой стороны.

Ниже слева видно, что это абзац с padding 30px вокруг него. На изображении справа я использовал инструменты Google Chrome, чтобы показать, где padding HTML начинается /заканчивается для этого элемента. Зеленый цвет на изображении ниже – это padding, который расположен вокруг контейнера. Темно-синий цвет фона заполняет внутреннюю область:

Теперь добавим margin абзацу. Я добавлю отступ сверху и снизу 30px, а также 20px слева и справа. Ниже на изображении слева показано, как этот абзац изменился с margin. Фактическая ширина изображения стала меньше, потому что margin отталкивает от границ другой HTML элемент. Справа видно, что оранжевый цвет – это margin вокруг элемента. margin всегда находится за пределами padding и темно-синий фон не распространяется на область margin:

Если вы до сих пор путаетесь, как использовать padding и margin HTML, то пришло время экспериментировать! Чем больше вы будете использовать свойства CSS, и изменять их значения, тем лучше поймете, как они работают.

Перевод статьи “CSS PADDING VS. MARGIN AND HOW TO USE THEM” был подготовлен дружной командой проекта Сайтостроение от А до Я.

CSS свойство margin

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

Например:

margin: 10px 5px 15px 20px;
- верхний отступ 10px
- правый отступ 5px
- нижний отступ 15px
- левый отступ 20px
margin: 10px 5px 15px;
- верхний отступ 10px
- правый и левый отступы 5px
- нижний отступ 15px
margin: 10px 5px;
- верхний и нижний отступы 10px
- правый и левый отступы 5px
margin: 10px;

Внимание: Допускается использование отрицательных значений.

CSS синтаксис

margin: размер | auto | initial | inherit;

Возможные значения

Значение Описание

auto	Браузер автоматически устанавливает размер отступов.
размер	Устанавливает размер отступов в единицах CSS - пикселях (px), сантиметрах (cm) и т.д. Значение по умолчанию 0.
%	Устанавливает размер отступов в процентах от ширины родительского элемента.
inherit	Значение наследуется от родительского элемента.
initial	Устанавливает значение по умолчанию.

Пример

Устанавливаем размер отступов параграфа со всех четырех сторон

p { margin: 2cm 4cm 3cm 4cm; }

Схлопывание отступов

У блочных элементов расположенных рядом друг с другом по вертикали наблюдается эффект схлопывания, когда отступы не суммируются, а объединяются между собой.

Рассмотрим следующий пример:

h2 { margin: 0 0 30px 0; } p { margin: 20px 0 0 0; }

Исходя из данного примера размер нижнего отступа элемента