Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Завдання: Застосування Box Sizing до Елементів | Модель Коробки CSS та Елементи Відступів
Основи CSS

bookЗавдання: Застосування Box Sizing до Елементів

Завдання

Дослідіть практичні відмінності між значеннями content-box та border-box для властивості box-sizing. Ваше завдання:

  • Застосуйте значення content-box до властивості box-sizing для елемента з id content-box.
  • Застосуйте значення border-box до властивості box-sizing для елемента з id border-box.
index.html

index.html

index.css

index.css

copy
  • box-sizing: content-box: Ширина та висота не враховують padding і border.
  • box-sizing: border-box: Ширина та висота враховують padding і border.
index.html

index.html

index.css

index.css

copy

Пояснення

  • Перший блок використовує content-box (типово). Ширина та висота застосовуються лише до вмісту, тому відступи та рамка збільшують його фінальний розмір понад 200×200px;
  • Другий блок використовує border-box. Ширина та висота включають вміст, відступи та рамку, тому загальний розмір залишається точно 200×200px.

Це робить перший блок візуально більшим, тоді як другий залишається незмінним незалежно від доданих відступів чи рамки.

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 4

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

bookЗавдання: Застосування Box Sizing до Елементів

Свайпніть щоб показати меню

Завдання

Дослідіть практичні відмінності між значеннями content-box та border-box для властивості box-sizing. Ваше завдання:

  • Застосуйте значення content-box до властивості box-sizing для елемента з id content-box.
  • Застосуйте значення border-box до властивості box-sizing для елемента з id border-box.
index.html

index.html

index.css

index.css

copy
  • box-sizing: content-box: Ширина та висота не враховують padding і border.
  • box-sizing: border-box: Ширина та висота враховують padding і border.
index.html

index.html

index.css

index.css

copy

Пояснення

  • Перший блок використовує content-box (типово). Ширина та висота застосовуються лише до вмісту, тому відступи та рамка збільшують його фінальний розмір понад 200×200px;
  • Другий блок використовує border-box. Ширина та висота включають вміст, відступи та рамку, тому загальний розмір залишається точно 200×200px.

Це робить перший блок візуально більшим, тоді як другий залишається незмінним незалежно від доданих відступів чи рамки.

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 4
some-alt