Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Working with Inline Elements | Box Model and Element Spacing

Working with Inline ElementsWorking with Inline Elements

Inline elements are positioned on a single line until there is sufficient space. When the available space is exhausted, the elements wrap to a new line. This behavior is achieved using the CSS property:

inline elements

Main considerations when working with inline elements:

  • They are inherently set to display: inline by default;
  • The width and height are determined solely by the element's content; explicit values for these properties will not apply;
  • Only horizontal (left and right) properties such as padding, margin, and border can be set.

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

html

index.html

css

index.css

js

index.js

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.

html

index.html

css

index.css

js

index.js

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

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

Working with Inline ElementsWorking with Inline Elements

Inline elements are positioned on a single line until there is sufficient space. When the available space is exhausted, the elements wrap to a new line. This behavior is achieved using the CSS property:

inline elements

Main considerations when working with inline elements:

  • They are inherently set to display: inline by default;
  • The width and height are determined solely by the element's content; explicit values for these properties will not apply;
  • Only horizontal (left and right) properties such as padding, margin, and border can be set.

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

html

index.html

css

index.css

js

index.js

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.

html

index.html

css

index.css

js

index.js

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

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