Внешние отступы

Последнее обновление: 21.04.2016

Свойство margin определяет отступ элемента от других элементов или границы внешнего контейнера. Существуют специальные свойства CSS для задания отступов для каждой стороны:

  • margin-top: отступ сверху

  • margin-bottom: отступ снизу

  • margin-left: отступ слева

  • margin-right: отступ справа

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
			div{
				margin-top: 30px; /* отступ сверху */
				margin-left: 25px; /* отступ слева */
				margin-right: 20px; /* отступ справа */
				margin-bottom: 15px; /* отступ снизу */
				
				border: 3px solid red; /* граница */
			}
        </style>
    </head>
    <body>
		<div>
			<p>Первый блок</p>
		</div>
		<div>
			<p>Второй блок</p>
		</div>
		<div>
			<p>Третий блок</p>
		</div>
    </body>
</html>
Margin в CSS 3

Можно вместо четырех свойств задать одно:

div{
	margin: 30px 20px 15px 25px;
	
	border: 3px solid red;
}

Свойство задается в формате:

margin: отступ_сверху отступ_справа отступ_снизу отступ_слева;

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

div{
	margin: 25px;
}

В этом случае для всех четырех отступов будет использоваться 25 пикселей.

Для установки отступов можно использовать точные значения в пикселях (px) или em, либо процентные отношения, либо значение auto (автоматическая установка отступов).

Например:

margin-left: 2em;

Значение 2 em определяет расстояние, которое в два раза больше размера шрифта элемента.

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

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

div{
	margin-top: 30px; /* отступ сверху */
	margin-left: 25px; /* отступ слева */
	margin-right: 20px; /* отступ справа */
	margin-bottom: 15px; /* отступ снизу */
}

Между первым и вторым блоками расстояние будет равно 30 пикселям - значение свойства margin-top второго блока div, несмотря на то, что у первого блока div имеется свойство margin-bottom, равное 15 пикселям.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850