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

И, для начала давайте попытаемся разобраться что это за блочная модель? Каждый имеющийся тег для браузера является блоком, который занимает всю доступную ему ширину. Таким образом, блок заканчивается не там где заканчивается содержимое блока, а там где заканчивается его пространство.

Для примера: создадим заголовок первого уровня H1, обычный список и простой параграф абзац (параграф) p

Заголовок первого уровня H1

• Первый элемент списка
• Второй элемент списка
• Третий элемент списка

Обычный параграф для примера

И для всех этих элементов зададим рамку (как создавать рамку в CSS можно посмотреть тут).

h1,li,p{
border:2px solid #ff0000;
}
/*Заголовок размещаем по центру*/
H1{
text-align:center;
}

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

Такой блок содержит в себе следующее: это Содержимое - там где находится текст блока, Внутренний отступ - который задается с помощью свойства - padding. Рамка - задается с помощью уже знакомого нам свойства border, толщина рамки может манятся от 1-го px и до того который нужен, и Внешний отступ или внешнее поле - задается с помощью свойства - margin.

Вот такую структуру и имеет каждый нами созданный блок. Если Вы обратили внимание на пример, который мы создали ранее то заметили, что во всех этих блоках имеются все эти отступы и свойства которые мы рассмотрели только что. Эти отступы и поля изначально задаются браузером в какое-то определенное значение в размере нескольких пикселей. Зачастую работая с элементами эти отступы и поля сильно мешают, и их приходится сбрасывать в ноль. Как это делается?

Для каждого элементам мы зададим следующие свойства: margin:0; и padding:0;. В результате для наших элементов будут заданы следующие слили.

H1,li,p{
Border:2px solid #ff0000;
margin:0;
padding:0;
}
/*Заголовок размещаем по центру*/
H1{
text-align:center;
}

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

ВАЖНО: Свойства margin и padding которые мы задали для наших элементов не могут быть унаследованы другими элементами. Эти свойства не наследуются и действуют только на те элементы, для которых их задали.

Используя свойства margin и padding можно не только убрать отступы и поля, а и наоборот задать их в нужное нам значение. Например:

H1,li,p{
Border:2px solid #ff0000;
margin:30px;
padding:30px;
}
/*Заголовок размещаем по центру*/
H1{
text-align:center;
}

В этом случае мы увидим, что все наши элементы получили отступ и поле по 30 пикселей как справа и слева, так и сверху и снизу. В данном примере мы задавали отступы и поля сразу для четырех сторон. Однако у нас есть возможность задать нужное значение и для одной определенной стороны. Для этого, к нашему свойству, через тире, добавляется сторона, с которой делать отступ или поле: margin-left и padding-right. В данном случае будут заданы значения для поля слева и для отступа справа.

Точно также можно задать отступы и поля сверху и снизу: margin-top и padding-bottom, и тогда наш элемент получит поле сверху и отступ снизу. Так для любого элемента Вы можете задать нужный отступ или поле с нужной стороны.

По отдельности задавать значение нам понятно как, но бывают случаи, когда нужно задать отступ или поле сразу для четырех сторон и все эти значения разные. Как тогда нам поступать в данном случае? Мы можем задать значения по отдельности для каждой стороны нужное значение, но это не совсем верно, так как это удлиняет запись кода и увеличивает размер файла. Для таких случаев есть короткая запись, где мы указываем margin или padding , и указываем ему, через пробел, все четыре нам нужных значения, ориентируясь на часовую стрелку. Так, как это показано на картинке выше. Мы указываем сначала значение “сверху” top, затем “справа” right, потом “снизу” bottom и в конце “слева” left. Получим запись следующего вида.

H1,li,p{
Border:2px solid #ff0000;
margin:30px 20px 10px 5px;
padding: 30px 20px 10px 5px;
}

Где мы задали сверху 30px справа 20px снизу 10px и слева 5px. Этот вариант записи мы рассмотрели, но есть случаи, когда у нас значения сверху и снизу одинаковы и/или справа и слева также одинаковы.

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

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