НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

CSS Підручник

CSS СТАРТ CSS Інтро CSS Синтаксис CSS Селектори CSS Як підключити CSS Коментарі CSS Кольори CSS Фони CSS Межі CSS Поля CSS Внутрішній відступ CSS Висота/Ширина CSS Блочна модель CSS Контур CSS Текст CSS Шрифти CSS Іконки CSS Посилання CSS Списки CSS Таблиці CSS Display CSS Max-Width CSS Position CSS Z-index CSS Overflow CSS Float CSS Inline-Block CSS Вирівнювання CSS Комбінатори CSS Псевдо-класи CSS Псевдо-елементи CSS Непрозорість CSS Панель навігації CSS Випадаючі списки CSS Галерея зображень CSS Спрайти зображень CSS Селектори атрибутів CSS Форми CSS Лічильники CSS Макет веб-сайту CSS Одиниці CSS Специфічності CSS !important CSS Математичні функції

CSS Розширений

CSS Закруглені кути CSS Межі зображень CSS Фони CSS Кольори CSS Кольори. Ключові слова CSS Градієнти CSS Тіні CSS Ефекти тексту CSS Веб-шрифти CSS 2D Трансформації CSS 3D Трансформації CSS Переходи CSS Анімації CSS Підказки CSS Стилі зображень CSS Image Reflection CSS Підгонка об'єкту CSS object-position CSS Masking CSS Кнопки CSS Нумерація сторінок CSS Кілька стовпців CSS Користувальницький інтерфейс CSS Змінні CSS Розміри блоків CSS Медіа-запити CSS Приклади медіа-запитів CSS Flexbox

CSS Адаптивний

RWD Інтро RWD Область перегляду RWD Вигляд сітки RWD Медіа-запити RWD Зображення RWD Відео RWD Фреймворки RWD Шаблони

CSS Grid (Сітка)

Grid Інтро Grid Контейнер Grid Елементи

CSS SASS

Підручник

CSS Приклади

CSS Шаблони CSS Приклади CSS Вікторина CSS Вправи CSS Сертифікат

CSS Довідники

CSS Довідник CSS Селектори CSS Функції CSS Довідник аудіо CSS Безпечні веб-шрифти CSS Анімація CSS Одиниці CSS PX-EM Конвертер CSS Кольори CSS Значення кольору CSS Значення за замовчуванням CSS Підтримка браузерами

CSS3. Уроки W3Schools для початківців українською мовою

En

CSS Box-sizing - Розмір блоку


CSS Розмір блоку

CSS властивість box-sizing дозволяє включати відступи і межі в загальну ширину і висоту елемента.


Без CSS властивості box-sizing

За замовчуванням ширина і висота елемента розраховується наступним чином:

width + padding + border = фактическая ширина елемента
height + padding + border = фактическая высота елемента

Це означає, що коли ви встановлюєте ширину / висоту елемента, елемент часто здається більше, ніж ви встановили (тому що межа та відступ елемента додаються до вказаної ширини / висоти елемента).

На наступному малюнку показані два елемента <div> з однаковими заданими шириною і висотою:

Цей div менше (ширина 300 пікселів і висота 100 пікселів).

Цей div більше (ширина також 300px і висота 100px).

Два елементи <div>, наведені вище, в результаті мають різні розміри (тому що в div2 задано відступ):

Приклад

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}
Спробуйте самі »

Властивість box-sizing вирішує цю проблему.


Із CSS властивістю box-sizing

Властивість box-sizing дозволяє нам включати відступи та межі в загальну ширину і висоту елемента.

Якщо ви встановили box-sizing: border-box; для елементів відступ і межі включаються в ширину і висоту:

Обидва div зараз однакового розміру!

Слава Україні!

Ось той самий приклад, що і вище, з box-sizing: border-box; додано в обидва елемента <div>:

Приклад

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}
Спробуйте самі »

Оскільки результат використання box-sizing: border-box; набагато краще, багато розробників хочуть, щоб всі елементи на їх сторінках працювали саме таким чином.

Наведений нижче код гарантує, що всі елементи будуть мати більш зручний розмір. Більшість браузерів вже використовують box-sizing: border-box; для багатьох елементів форми (але не для всіх - тому вхідні та текстові області виглядають по-різному при width: 100%;).

Застосовувати це до всіх елементів безпечно та розумно:

Приклад

* {
  box-sizing: border-box;
}
Спробуйте самі »

CSS властивість box-sizing

Властивість Опис
box-sizing Визначає, як розраховуються ширина та висота елемента: чи мають вони містити відступи та межі, чи ні