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:

css
Copia codice
display: inline;

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.