Некоторые свойства блоков

Пара слов о блочной модели. У каждого элемента, независимо от того, блочный он или строчный, есть:

  1. margin — внешний отступ от блока, если заливаете блок текстурой, то текстура не распространяется на эту область.
  2. border — граница, между блоком и остальной страницей.
  3. padding — отступ от содержимого блока до границы.

В отладчике эта модель представлена наглядно:

А теперь давайте поставим два блока друг на друга:

	<div class="outer">
		<div class="sample-block">

			<p>Вне этой ... <!-- здесь много текста --> ... расположены.</p>

		</div>
		<div class="sample-block">

			<p>Вне этой ... <!-- здесь много текста --> ... расположены.</p>

		</div>
	</div>

И применим к ним CSS, наглядно демонстрирующий блочную модель.

.sample-block {
	margin:40px;
	border:5px solid #2c69a7; /* толщина границы 5px, граница сплошная (solid, а может быть ещё dashed и dotted), цвет #2c69a7 */
	padding:40px;
	background-color:#9dcbf9;
}

Как вы думаете, какое расстояние между блоками будет? 2×40px? Нет расстояние будет 40px. Это связано с тем, что изначально не было псевдокласса :nth-child(), который помогал устанавливать правила отображения по формуле. Про этот псевдокласс расскажу позже. В условиях, когда не было возможности указать каждому члену его margin, нужно было, чтобы поставив блоки друга на друга, расстояние до них, между ними и после них было одинаковым. Например, лента постов в блоге.

Отступ между блоками будет равен максимальному. Сейчас мы проверим это правило. Изменим код следующим образом:

	<div class="outer">
		<div class="sample-block sample-block-1">

			<p>Вне этой ... <!-- здесь много текста --> ... расположены.</p>

		</div>
		<div class="sample-block sample-block-2">

			<p>Вне этой ... <!-- здесь много текста --> ... расположены.</p>

		</div>
	</div>

В CSS-файл добавим строчки:

.sample-block-1 {
	margin:40px 40px 20px 40px; /* По часовой стрелке, начиная с 12 часов: top right bottom left */
}

.sample-block-2 {
	margin:30px 40px 40px 40px;
}

А теперь, внимание, ещё один интересный момент. Какую область занимает блок-оболочка? Смотрите:

Если блок .outer нужно залить текстурой, то ситуация будет весьма неприятной. Сделать так, чтобы родитель охватывал потомков вместе с их внешними отступами, можно задав блоку-родителю верхний и нижний padding ненулевой величины.

.outer {
	padding:1px 0; /* Сверху и снизу 1px, по бокам 0 */
}

Теперь блок-оболочка полностью обтекает потомков. Но лишние пиксели могут мешать. Лишний пиксель, который даёт нам padding сверху и снизу, мы можем компенсировать отрицательными внешними отступами:

.outer {
	padding:1px 0;
	margin:-1px 0;
}