Working 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:

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:

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.