Block model

Четыре значения в свойстве margin в CSS

Сейчас мы будем разбираться со свойством margin, которое задает отступы между элементами сайта. Давайте посмотрим, как это выглядит на практике.

Для начала приведу вам два вложенных друг в друга блока без margin (они слипнутся и мы увидим двойную границу):

#parent { width: 300px; border: 1px solid red; }
#child { height: 100px; border: 1px solid green; }

Три значения в свойстве margin в CSS

Ну, и наконец, если передать свойству margin три значения, то первое будет задавать отступ сверху, третье - отступ снизу, а второе - одновременно отступ слева и справа. Давайте посмотрим пример:

#parent { width: 300px; border: 1px solid red; }
#child { height: 100px; border: 1px solid green; margin: 10px 20px 30px; }

Несколько значений в свойстве padding в CSS

В свойство padding можно передать два, три или четыре параметра. В этих случаях он работает аналогично свойству margin.

Работа с отступами padding в CSS

Пусть некоторому элементу мы задали ширину 100px. В CSS это отнюдь не означает, что элемент действительно будет шириной в 100px. Дело в том, что добавление padding расширяет элемент и он становится больше, чем указано в свойстве width.
Давайте посмотрим на примере. Сделаем два блока, которым зададим ширину 100 пикселей. При этом второму блоку зададим padding, а первому - нет. В результате второй блок будет больше на размер отступа:

#elem1 { width: 100px; height: 100px; background: #f1f1f1; margin-bottom: 20px; }
#elem2 { padding: 25px; /* задаем отступы */ width: 100px; height: 100px; background:#f1f1f1; }

Особенности блочных элементов в CSS

В следующих уроках мы рассмотрим теги, которые при отображении на экране являются блочными. К таким тегам относятся, к примеру, теги div, с которыми мы будем работать далее.

Ширина и высота блочного элемента в CSS

Блочному элементу можно задать ширину и высоту:

div { width: 100px; height: 100px; border: 1px solid red; }

Несколько блочных элементов рядом в CSS

Если расположить несколько блочных элементов рядом, то каждый из них будет начинаться с новой строки:

div { width: 100px; height: 100px; margin-bottom: 20px; border: 1px solid red; }

Особенности строчных элементов в CSS

Существуют теги, которые при отображении на экране являются строчными. К таким тегам относятся, к примеру, тег span. На примере этого тега давайте посмотрим на особенности строчных элементов в следующих уроках.

Ширина и высота строчного элемента в CSS

Ширина и высота строчного элемента всегда ограничены его текстом. Даже если задать свойства width и height - для строчного элемента они не сработают:

span { width: 100px; height: 100px; border: 1px solid red; }

Несколько строчных элементов рядом в CSS

Если расположить несколько строчных элементов рядом, то они выстроятся в ряд:

span { border: 1px solid red; }

Особенности строчно-блочных элементов в CSS

Существуют теги, которые при отображении на экране являются строчно-блочными. Строчно-блочные элементы сочетают особенности блочных и строчных элементов.

Вы пока знаете только один такой тег: img. Картинки, однако, не раскрывают все особенности этой модели, поэтому работу таких элементов посмотрим на примере тегов span, сменив им блочную модель, задав свойству display значение inline-block.

Центрирование строчно-блочных элементов в CSS

Для примера давайте поставим строчно-блочные элементы по центру:

.parent { text-align: center; padding: 10px 0; border: 1px solid red; }
.child { display: inline-block; padding: 10px 20px; border: 1px solid green; }

Флекс элементы в CSS

Кроме изученных нами типов блочных моделей есть еще одна - флекс элементы. Для того, чтобы получить такие элементы, нужно родителю этих элементов написать свойство display в значении flex. Сам родитель останется блочным элементом, а вот его потомки станут флекс элементами.

Флекс элементы, подобно блочным могут иметь ширину и высоту, margin и padding. Однако, в отличие от блочных, по умолчанию флекс элементы выстраиваются в ряд внутри своего родителя.

Давайте попробуем:

.parent { display: flex; width: 300px; height: 200px; border: 1px solid red; }
.child { width: 50px; height: 50px; border: 1px solid green; }

Строчно-блочный родитель флекс элементов в CSS

Вместо значения flex для свойства display родителю можно поставить значение inline-flex. В этом случае этот родитель будет вести себя, как строчно-блочный элемент.

Например, если не задать ширину родителя, то его ширина сформируется шириной потомков:

.parent { display: inline-flex; border: 1px solid red; }
.child { width: 50px; height: 50px; border: 1px solid green; }

Выравнивание flex элементов в CSS

Для выравнивания флекс элементов используется специальное свойство justify-content. Оно принимает достаточно много значений, которые мы и изучим в следующих уроках.

CSS Flexbox