Урок 5. Відступи та поля: margin, padding, border

План уроку: Відступи та поля (25-30 хвилин)

1. Вступ (5 хвилин)

• Що таке "Box Model"?

  • У CSS кожен елемент представляється у вигляді коробки. Ця коробка має такі частини: контент, внутрішній відступ (padding), межа (border) та зовнішній відступ (margin).
  • Розуміння Box Model є ключовим для правильного позиціонування та стилізації елементів на сторінці.

• Короткий огляд Box Model:

  • Контент: Вміст елемента (текст, зображення).
  • Padding: Відступ між вмістом елемента і його межею.
  • Border: Межа елемента, що оточує padding.
  • Margin: Відступ між межею елемента і сусідніми елементами.

2. Властивість margin (10 хвилин)

• Що таке margin?

  • margin визначає зовнішні відступи елемента, тобто простір між елементом і сусідніми елементами на сторінці.

• Приклад:

  div {
    margin: 20px;
  }
  

• Пояснення: Цей код встановлює відступ у 20 пікселів з усіх сторін елемента div.

• Індивідуальні відступи для кожної сторони:

  • Ви можете задавати різні значення для відступів з різних сторін (верх, низ, ліво, право) за допомогою чотирьох параметрів.

• Приклад:

  div {
    margin: 10px 20px 15px 5px;
  }
  

  Пояснення: Відступи задаються у порядку: верх, правий, нижній, лівий.

• Автоматичне центрування елемента:

  • Ви можете використовувати margin: auto;, щоб автоматично центрувати блоковий елемент горизонтально.

• Приклад:

  div {
    width: 50%;
    margin: 0 auto;
  }
  

• Пояснення: Це центрює елемент div у контейнері.

3. Властивість padding (5 хвилин)

• Що таке padding?

  • padding визначає внутрішній відступ, тобто простір між вмістом елемента та його межею.

• Приклад:

  div {
    padding: 20px;
  }
  

• Пояснення: Цей код додає 20 пікселів простору між вмістом і межею елемента.

• Індивідуальні відступи для кожної сторони:

  • Так само, як і для margin, можна задавати окремі значення для кожної сторони.

• Приклад:

  div {
    padding: 10px 20px 15px 5px;
  }
  

• Пояснення: Відступи задаються у порядку: верх, правий, нижній, лівий.

4. Властивість border (5 хвилин)

• Що таке border?

  • border визначає межу навколо елемента. Ви можете налаштовувати її товщину, стиль і колір.

• Приклад:

  div {
    border: 2px solid black;
  }
  

• Пояснення: Цей код додає межу товщиною 2 пікселі, чорного кольору і зі стилем solid (суцільна лінія).

• Стилі межі:

  • Існують різні стилі меж: solid, dashed, dotted, double і т.д.

• Приклад:

  div {
    border: 3px dashed red;
  }
  

• Пояснення: Додається межа товщиною 3 пікселі, червоного кольору і зі стилем dashed (пунктирна лінія).

5. Практична частина (10 хвилин)

• Завдання 1:

  • Створіть блоковий елемент з текстом всередині.
  • Додайте до нього padding, щоб текст не прилягав до межі.

• Приклад:

  div {
    padding: 20px;
    border: 2px solid blue;
  }
  

Завдання 2:

• Створіть три блоки і задайте для них різні відступи за допомогою margin. Центруйте один з блоків на сторінці.

Приклад:

.centered {
  margin: 0 auto;
  width: 50%;
  border: 1px solid black;
}

6. Підсумок уроку (5 хвилин)

• Що повторити:

  • Що таке Box Model і як він працює.
  • Як використовувати margin, padding і border для керування простором та межами елементів.
    
    

• Запитання для обговорення:

  • Яка різниця між margin і padding?
  • Як працює властивість auto для центрування елементів?

Домашнє завдання

• Створіть просту сторінку з кількома блоковими елементами. Налаштуйте для кожного елемента різні відступи, поля та межі. Використайте властивості margin, padding, та border, щоб продемонструвати їхню роботу.

Цей урок допоможе учням зрозуміти, як управляти простором і виглядом елементів на сторінці, використовуючи відступи, поля та межі. Ці знання є важливими для створення гармонійного та зручного інтерфейсу.