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

bookРобота з блочними елементами

Блочні елементи мають прямокутну форму та розташовуються один над одним, не дозволяючи іншим елементам знаходитися на тій же лінії. Ця поведінка визначається CSS-властивістю display: block.

Основні характеристики блочних елементів:

  • За замовчуванням мають display: block;
  • Їхня ширина займає всю ширину батьківського контейнера;
  • Висота визначається вмістом, але може бути змінена за допомогою CSS;
  • Завжди починаються з нового рядка;
  • Властивості, такі як border, margin, padding, width і height, можна налаштовувати.

Розглянемо приклад, у якому змінюються width, height та margin:

index.html

index.html

index.css

index.css

copy

Розглянемо, як можна вирівняти елемент по центру всередині його батьківського елемента.

index.html

index.html

index.css

index.css

copy

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

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

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

Awesome!

Completion rate improved to 2.56

bookРобота з блочними елементами

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

Блочні елементи мають прямокутну форму та розташовуються один над одним, не дозволяючи іншим елементам знаходитися на тій же лінії. Ця поведінка визначається CSS-властивістю display: block.

Основні характеристики блочних елементів:

  • За замовчуванням мають display: block;
  • Їхня ширина займає всю ширину батьківського контейнера;
  • Висота визначається вмістом, але може бути змінена за допомогою CSS;
  • Завжди починаються з нового рядка;
  • Властивості, такі як border, margin, padding, width і height, можна налаштовувати.

Розглянемо приклад, у якому змінюються width, height та margin:

index.html

index.html

index.css

index.css

copy

Розглянемо, як можна вирівняти елемент по центру всередині його батьківського елемента.

index.html

index.html

index.css

index.css

copy

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

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

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

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