Padding и margin

Margin и Padding - это очень часто используемые свойства в CSS . Margin - пространство за его рамками, а Padding - это пространство внутри чего-либо.

Вот пример:

h2 {

margin: 20px;

padding: 40px;

}

Это оставляет пространство шириной 20 пикселей вокруг вторичного заголовка, а сам заголовок жирен от заполнения шириной 40 пикселей.

Четыре стороны элемента также могут быть установлены индивидуально. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom и padding-left - это очевидные свойства, которые вы можете использовать.

The Box Model

Поля, отступы и границы являются частью так называемой Box Model. Боксовая модель работает следующим образом: в середине у вас есть область контента (скажем, изображение), окружающая вас, у вас есть отступы, окружающая вас, у вас есть граница, и окружающая, у вас есть поле. Это может быть визуально представлено так:

1. Margin 
2. Border 
3. Padding 
4. Element 

Вам не нужно все это использовать(Margins and Padding), но полезно запомнить, что блочная модель может применяться ко всем элементам вашей страницы.

Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!