В html каждый элемент можно воспринимать как отдельный блок. Очень часто возникает необходимость создать отступы между элементами, к примеру чтобы они не сливались друг с другом.
margin и padding - два наиболее часто используемых свойства для создания отступов для html элементов. Margin- это отступ за пределами блока (внешний отступ), а padding- отступ внутри блока (внутренний оступ).
h2 {
margin: 20px;
padding: 40px;
}
На этом примере показано что у заголовка h2 имеется внешний отступ в 20px, а сам заголовок становится "толстым" из-за внутреннего отступа в 40px.
Для каждой из четыреч сторон html элемента отступы можно настроить индивидуально. Для этого существуют следующие свойства:
И аналогично для внутренних отступов:
Margin, pading и border - все это часть так называемой блочной модели. Блочная модель работает следующим образом: посередине у вас есть некая область содержимого (к примеру, изображение), вокруг которой есть внутренние отступы, затем, уровнем выше идет border, и еще выше - margin (внешний отступ). Визуально это можно представить так:
margin: [значение | проценты | auto] {1,4} | inherit
padding: [значение | проценты | auto] {1,4} | inherit
Мы можем использовать одно. два, три или четыре значения разделяя их между собой пробеломю
Если мы укажем:
