Боксовая модель CSS

У любого блочного элемента в CSS есть свои геометрические параметры – ширина и высота, то есть x и y, на оси координат, также в некоторых случаях встречается z-координата, о z координате поговорим в конце статьи

В CSS блочный элемент обозначается “display:block”, так вот каждый блочный элмент имеет ширину и высоту, однако существует три CSS свойства способных изменять, косвенно, изменять эти параметры.

Border – рамка вокруг элемента, «по умолчанию» border равен 0 px и является не видимым
Padding – отступ между border и содержимым элемента.
Margin - отступ после border`a

Когда я начал заниматься созданием сайтов, я узнавал всё методом проб и ошибок и поэтому довольно долго использовал два свойства (padding и magrin) бездумно. Когда я набрался опыта – стал использовать их интуитивно и лишь не давно, увидев боксовую модель блочного элемента (иллюстрация ниже), всё стало на свои места.

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

Z-координаты или z-index

Иногда блоки расположенные на Вашем сайте наезжают друг на друга, и довольно часто это делается умышленно, скажем чтобы показать всплывающее окно поверх всех остальных элментов. Чтобы правильно расположить блоки на оси Z (смотрите иллюстрацию системы координат ниже) было придумано свойство z-index, с числовым значением. Пользоваться им очень просто. Элемент должен иметь позиционирование, значение которого position задано как absolute, fixed или relative. После чего элементы можно расставлять в данной последовательности, чем Выше число z, тем ближе к нам будет элемент. То есть элемент с z-index 100, перекроет элемент с z-index 75.