Вивчайте Робота з Вбудованими Елементами | Модель Коробки CSS та Елементи Відступів

Інлайнові елементи залишаються на одному рядку та переносяться на наступний рядок, коли закінчується місце. Ця поведінка контролюється CSS-властивістю display: inline.

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

За замовчуванням мають display: inline;
Їх ширина та висота визначаються вмістом і не можуть бути явно задані;
Можна застосовувати лише горизонтальні властивості, такі як padding, margin та border.

Розглянемо приклад, де деякі стилі впливають на елемент, а інші — ні, у CSS-файлі:

index.html

index.css

Додаткове вивчення

За замовчуванням inline-елементи мають проміжок праворуч; для елементів img цей проміжок знаходиться внизу. Цей простір не належить до padding чи margin. Натомість це вбудований порожній простір, який додають браузери для забезпечення відстані між кожним елементом.

index.html

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

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

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

Запитати АІ

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

Suggested prompts:

Can you explain why vertical margin and padding don't affect inline elements?

What are some examples of inline elements besides the <a> tag?

How can I make an inline element behave like a block element?

Awesome!

Completion rate improved to 2.56

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

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

За замовчуванням мають display: inline;
Їх ширина та висота визначаються вмістом і не можуть бути явно задані;
Можна застосовувати лише горизонтальні властивості, такі як padding, margin та border.

Розглянемо приклад, де деякі стилі впливають на елемент, а інші — ні, у CSS-файлі:

index.html

index.css

Додаткове вивчення

index.html

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

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

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