Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Робота з Блочними Елементами | Box Model and Element Spacing
Основи CSS

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

Блочні елементи можна ідентифікувати як прямокутні, і вони накладаються один на одного. Вони не дають іншим елементам ділити з ними один рядок. Така поведінка досягається застосуванням властивості CSS:

blcok level elements example

Основні міркування при роботі з блочними елементами:

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

Тепер давайте розглянемо приклад, де ми маніпулюємо width, height і margin:

html

index.html

css

index.css

js

index.js

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

html

index.html

css

index.css

js

index.js

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

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

Зміст курсу

Основи CSS

Основи CSS

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

Блочні елементи можна ідентифікувати як прямокутні, і вони накладаються один на одного. Вони не дають іншим елементам ділити з ними один рядок. Така поведінка досягається застосуванням властивості CSS:

blcok level elements example

Основні міркування при роботі з блочними елементами:

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

Тепер давайте розглянемо приклад, де ми маніпулюємо width, height і margin:

html

index.html

css

index.css

js

index.js

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

html

index.html

css

index.css

js

index.js

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

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