Свойства margin , padding , строчные и блочные элементы.
Давайте рассмотрим, что такое margin и padding и какие между ними различия. Margin это внешний отступ элемента, а padding внутренний.
Если мы имеем два блока один в одном и для внутреннего блока нужен отступ мы используем свойство padding. Но если у нас есть два блока
расположенные радом друг с другом и нужно задать отступ между ними, мы используем свойство margin.Обращаем внимание что для первой картинки могут быть использованы как padding так и margin. Разница в том, что как говорилось ранее padding это внутренний отступ и для размещения внутреннего блока свойство padding задается наружному блоку. Margin работает примерно так же, но наоборот, задается внутреннему блоку для отступа от наружного.
Пример на первую картинку c использованием свойства padding:
И пример с использованием margin:
Пример для второй картинки:
Рассматривая эти свойства на практике более сильным приоритет будет обладать свойство margin в отличии от свойства padding. Но для внутреннего отступа желательно использовать свойство padding.
Форма записи.
Padding-top:значение; Margin- op:значение;
Padding-right:значение; Margin-right:значение;
Padding-bottom:значение; Margin-bottom:значение;Padding-bottom:значение; Margin-bottom:значение;
Значения этим свойствам задаются в: px, %, em и тд. Например: Padding-top:25px; Также существует сокращенная запись margin и padding.
4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева:
padding: 2px 4px 5px 10px;
margin: 2px 4px 5px 10px;
3 значения: задается отступ сначала для верхней стороны, потом одновременно для левой и правой, а затем – для нижней:
padding: 3px 6px 9px;
margin: 3px 6px 9px;
2 значения: задаются отступы сначала одновременно от верхней и нижней стороны, а затем – одновременно для левой и правой:
1 значение: задаются одинаковые отступы для всех сторон элемента:
Строчные и блочные элементы.
Отличие строчных от блочных элементов в том-что блочных элементы на веб-странице начинается с новой строки и идут друг под другом, имеет вид прямоугольника и занимает всю его ширину. Высота блочного элемента зависит от его содержимого. Строчный элемент идут в одну строку. Сколько строчных элементов будет в строке зависит от размера строчного элемента.
К блочным элементам относятся тэги:
и элементы у которых значение display задано как block, list-item, table.
К строчным элементам относятся тэги: <img>, <span>, <a>, <q>, <code> и элементы у которых значение display установлено как inline.
Как мы видим не зависимо от начального состояния элемента (сторчный или блочный) его значение можно изменить с помощью свойства display.
margin-bottom¶
Свойство margin-bottom устанавливает величину отступа от нижнего края элемента.
Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).
Синтаксис¶
Значения¶
Величину нижнего отступа можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.
auto Указывает, что размер отступов будет автоматически рассчитан браузером.
margin-bottom
Свойство CSS margin-bottom устанавливает внешний отступ внизу элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное — сокращает.
Интерактивный пример
Это свойство не имеет воздействия на незамещаемые элементы, такие как <span> или <code> .
Синтаксис
Свойство margin-bottom может быть выражено как ключевое слово auto , или как <число> , или как <процент> . Значение может быть положительным, нулевым или отрицательным.
Значения
Размер отступа — фиксированная величина.
Размер отступа в процентах — размер относительно длины родительского блока.