Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Working with Inline Elements | Section
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
CSS Fundamentals for React Developers - 1768407374224

bookWorking with Inline Elements

Inline elements stay on a single line and wrap to the next line when space runs out. This behavior is controlled by the CSS property display: inline.

Key points about inline elements:

  • They default to display: inline;
  • Their width and height are determined by their content and cannot be explicitly set;
  • Only horizontal properties like padding, margin, and border can be applied.

Let's examine an example where some styles impact the element, while others do not, within the CSS file:

index.html

index.html

index.css

index.css

copy
Note
Study More

By default, inline elements have a gap on the right side; for img elements, this gap is at the bottom. This space is not attributed to padding or margin. Instead, it's an inherent blank space added by browsers to ensure a distance between each element.

index.html

index.html

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

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

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

Секція 1. Розділ 25

Запитати АІ

expand

Запитати АІ

ChatGPT

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

bookWorking with Inline Elements

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

Inline elements stay on a single line and wrap to the next line when space runs out. This behavior is controlled by the CSS property display: inline.

Key points about inline elements:

  • They default to display: inline;
  • Their width and height are determined by their content and cannot be explicitly set;
  • Only horizontal properties like padding, margin, and border can be applied.

Let's examine an example where some styles impact the element, while others do not, within the CSS file:

index.html

index.html

index.css

index.css

copy
Note
Study More

By default, inline elements have a gap on the right side; for img elements, this gap is at the bottom. This space is not attributed to padding or margin. Instead, it's an inherent blank space added by browsers to ensure a distance between each element.

index.html

index.html

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

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

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

Секція 1. Розділ 25
some-alt