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

Contenuti del Corso

CSS Fundamentals

CSS Fundamentals

1. Introduction to CSS
2. Text Styles
3. Box Model and Element Spacing
4. Flexbox
5. Decorative Effects

book
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

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

copy

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

copy

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 9

Chieda ad AI

expand
ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

course content

Contenuti del Corso

CSS Fundamentals

CSS Fundamentals

1. Introduction to CSS
2. Text Styles
3. Box Model and Element Spacing
4. Flexbox
5. Decorative Effects

book
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

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

copy

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

copy

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 9
Siamo spiacenti che qualcosa sia andato storto. Cosa è successo?
some-alt