Блочная модель. Margin, padding, border - Основы веб-разработки - ADivC

Что такое блочная модель

Посмотрите на главную страницу сайта ADC. Видите крупный заголовок «ADC Community» по центру? Вокруг него есть пространство. Картинка ниже не прилипает к нему, есть воздух. Навигация вверху не прилипает к краю экрана.

Всё это пространство контролируется через блочную модель. Каждый элемент на странице — это коробка. У коробки есть содержимое, внутренние отступы, рамка и внешние отступы. Как матрёшка. Внутри содержимое, потом слой отступов, потом рамка, потом ещё слой отступов.

Представьте картину в рамке на стене. Само изображение — это содержимое. Паспарту вокруг изображения — это padding, внутренний отступ. Рама — это border. Расстояние от рамы до других картин на стене — это margin, внешний отступ.

Внутренние отступы — padding

Начнём с padding. Внутренний отступ — это пространство между содержимым и краем элемента. Посмотрите на отступы внутри полей формы. Это padding.

У нас уже есть HTML код формы:

HTML

<form class="contact-form">
  <input type="text" placeholder="Имя" class="form-input" required>
  <input type="text" placeholder="Фамилия" class="form-input" required>
  <input type="tel" placeholder="Номер телефона" class="form-input" required>
  <button type="submit" class="submit-button">Отправить</button>
</form>

В CSS добавьте padding:

CSS

.form-input {
  width: 100%;
  font-size: 16px;
  padding-right: 16px;
  border-radius: 8px;
  background-color: #E5E5E5;
}

padding-right: 16px означает отступ 16 пикселей справа. Текст не прилипает к краям, блок дышит. Без padding текст касался бы границ, читать было бы неудобно.

Также зададим padding кнопке:

HTML

<p>
  История создания и развития ADC — как идея объединения дизайна
  и программирования переросла в активное комьюнити. От первых митапов до здания
  на Пантелеевской
</p>

<button class="button-click">Посмотреть</button>

Добавим свойство в CSS:

CSS

.button-click {
  padding: 16px 32px;
  border-radius: 900px;
  background: #313131;
}

Здесь padding мы уже задали двумя значениями. 16px — это расстояние сверху и снизу, а 32px — слева и справа. Можно задавать и четыре значения, но главное запомнить, что порядок важен: верх, право, низ, лево. По часовой стрелке, начиная сверху.

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

Теперь margin. Внешний отступ — это расстояние между элементом и другими элементами. Посмотрите на страницу ADC. Между заголовком «ADC Community» и картинкой есть расстояние. Между картинкой и текстом есть расстояние. Между секциями есть расстояние. Это margin.

Добавьте margin к заголовку:

CSS

h1 {
  font-size: 98px;
  margin-bottom: 64px;
}

margin-bottom: 64px создаёт отступ снизу от заголовка. Следующий элемент отодвинется на 64 пикселя.

Добавьте margin к картинке:

CSS

.hero-image {
  width: 100%;
  max-width: 1818px;
  border-radius: 12px;
  margin-bottom: 64px;
}

Посмотрите на секцию «Что изучают студенты ADC». Видите список направлений с разделителями? Каждое направление — это отдельный блок с отступами.

HTML

<section class="programs-section">
  <h2>Что изучают студенты ADC</h2>

  <div class="program-item">
    <h3 class="program-title">Веб-вёрстка и веб-программирование</h3>
    <p class="program-description">
      HTML, CSS, JavaScript, создание многостраничных сайтов
    </p>
    <hr />
  </div>

  <div class="program-item">
    <h3 class="program-title">UX/UI дизайн и прототипирование</h3>
    <p class="program-description">Figma, FigJam, интерактивные прототипы</p>
    <hr />
  </div>

  <div class="program-item">
    <h3 class="program-title">Креативное программирование, генеративная графика</h3>
    <p class="program-description">Статичные и динамические веб-плакаты</p>
    <hr />
  </div>
</section>

В CSS добавьте padding и margin:

CSS

.program-item, .program-item p {
  margin-bottom: 48px;
}

.program-item h3 {
  margin-bottom: 20px;
}

Рамки — border

Теперь border. На нашем сайте нет элементов с обводкой. Но есть обводка у кнопки, которая добавляется по умолчанию во всех браузерах. Давайте её уберём.

Зайдите в файл reset.css и там добавьте правило:

CSS

button {
  border: none;
}

Зайдите в браузер, обновите страницу. Теперь у всех кнопок исчезла обводка.

Заключение

Запомните главное. Padding внутренний отступ, между содержимым и краем элемента. Margin внешний отступ, между элементом и другими элементами. Border рамка вокруг элемента. Порядок значений: верх, право, низ, лево.

Мы завершили обучение базовым стилям в CSS. Конечно, это ещё не всё, страницы пока не выглядят так же, как и на макете. К финальному виду мы их приведём в последующих уроках. В качестве домашнего задания добавьте margin и padding для элементов на странице статьи.

Что такое padding в CSS?

Внешний отступ между элементами

Внутренний отступ между содержимым и краем элемента

Рамка вокруг элемента

Размер элемента

В каком порядке указываются четыре значения для padding?

Лево, право, верх, низ

Верх, право, низ, лево

Верх, низ, лево, право

Право, низ, лево, верх

Чем margin отличается от padding?

Margin создаёт отступ внутри элемента, padding снаружи