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:
cssdisplay: inline;
Main considerations when working with inline elements:
They are inherently set to
display: inline
by default;The
width
andheight
are determined solely by the element's content; explicit values for these properties will not apply;Only horizontal (
left
andright
) properties such aspadding
,margin
, andborder
can be set.
Now, let's examine an example where some styles impact the element, while others do not, within the CSS file:
index.html
index.css
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
- , opens captions settings dialogcaptions settings
- captions off
- , selectedEnglish Captions
- 2x
- 1.5x
- , selected1x
- 0.5x
This is a modal window.
Beginning of dialog window. Escape will cancel and close the window.
End of dialog window.
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat