Перейти к контенту

Margin и Padding — блочные модели

margin и padding являются наиболее популярными свойствами для расстановки элементов. В то время как margin определяет пространство за пределами (снаружи) элемента, padding определяет пространство внутри элемента.

Замените CSS-код для элемента h2 следующим:

 

h2 {
	font-size: 1.5em;
	background-color: #ccc;
	margin: 1em;
	padding: 3em;
}

Вы заметите, что пространство шириной в один знак (margin) было оставлено около заголовка второго уровня,а сам заголовок стал толще в результате padding, равного 3 знакам.

Вы можете задавать margin и padding для четырех сторон элемента по отдельности: margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom и padding-left.

Блочная модель

Margin, padding и border – это части так называемой Блочной модели. Механизм Блочной модели следующий: Посередине есть зона контента, которую окружает padding, окруженный границей border, которая в свою очередь окружена полями margin. Визуально представление Блочной модели выглядит так:

Margin box

Border box

Padding box

Element box

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

 




Оцени статью

Средняя оценка / 5. Количество голосов:

Спасибо, помогите другим - напишите комментарий, добавьте информации к статье.

Или поделись статьей

Видим, что вы не нашли ответ на свой вопрос.

Помогите улучшить статью.

 

Пока нет комментариев.

Добавить комментарий

Ваш e-mail не будет опубликован.

СайдбарКомментарии (0)