Внутренние и внешние отступы в боксах.
Как и сказал на предыдущей странице отступы не есть обязательными, а только в том случае если этого требует ваш дизайн.
Внешний отступ(margin) устанавливает расстояние от бокса к соседям.
Например: DIV{margin:0;} убирает все отступы тегах DIV.
margin это сокращенная форма, которая подразумевает:
margin-top - управляет внешним отступом вверху;
margin-right - управляет внешним отступом справа;
margin-bottom - управляет внешним отступом в низу;
margin-left - управляет внешним отступом слева.
Пример: DIV{
margin-top:10px;
margin-right:-5px;
margin-bottom:110%;
margin-left:auto;
}
Из этого примера четко видно, что значения могут быть цифровыми, в том числе отрицательными если это необходимо, но в этом случае содержимое тега DIV "налазит на соседей". Если значение цифровое и равно нолю, то указывать единицы измерения не обязательно, в остальных случаях просто необходимо!!!
Так-же значение может быть процентах относительно содержимого бокса, например если бы это был не DIV а IMG шириной 100px, то отступ получился бы 110px.
Значение auto используется только с margin-right и/или margin-left, и вычисляется автоматически, честно сказать самое непредсказуемое значение, но об этом поговорим немного позже.
Чтобы не составлять такое громоздкое правило его можно сократить:
DIV{margin:1px;} в этом варианте все внешние отступы получат размер 1пиксель.
DIV{margin:1px 2px;} устанавливает отступы сверху и снизу 1пиксель, а по бокам 2пикселя.
DIV{margin:1px 2px 3px;} а этот вариант устанавливает верхний отступ 1пиксель, правый и левый 2пикселя, а нижний в 3пикселя. Если значение не задано то оно берется с противоположной стороны.
DIV{margin:1px 2px 3px 4px;} (margin-top, margin-right, margin-bottom, margin-left)
Другими словами предыдущий пример можно было записать вот так:
DIV{margin:10px -5px 110% auto;}
Внешние отступы(margin и его модификации) не наследуются, эти отступы можно применить к всем элементам(тегам), эти свойства правил применяются только для визуального представления, например для браузеров и/или принтеров.
Внутренние отступы(padding) можно сказать аналогичный margin.
DIV{padding:1px;} управляет 4 сторонами внутренних отступов.
Так-же можно управлять каждой стороной по отдельности:
padding-top - управляет внутренним отступом вверху;
padding-right - управляет внутренним отступом справа;
padding-bottom - управляет внутренним отступом в низу;
padding-left - управляет внутренним отступом слева.
Правила могут быть так-же сокращенными: от DIV{padding:1px;} до DIV{padding:1px 2px 3px 4px;}
Отличается padding от margin только тем что внутренние отступы могут принимать значения числовые и/или процентные, а auto не принимают.
Внутренние отступы(padding) так-же применяются к всем тегам и не наследуются, а так-же используются только для визуального оформления.