Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Lavorare con Elementi Inline | Il Modello a Scatola CSS e Gli Elementi di Spaziatura
Fondamenti Di CSS

bookLavorare con Elementi Inline

Gli elementi inline rimangono su una singola riga e vanno a capo solo quando lo spazio termina. Questo comportamento è controllato dalla proprietà CSS display: inline.

Punti chiave sugli elementi inline:

  • Per impostazione predefinita hanno display: inline;
  • La loro larghezza e altezza sono determinate dal contenuto e non possono essere impostate esplicitamente;
  • È possibile applicare solo proprietà orizzontali come padding, margin e border.

Analizziamo un esempio in cui alcuni stili influenzano l'elemento, mentre altri no, all'interno del file CSS:

index.html

index.html

index.css

index.css

copy
Note
Approfondisci

Per impostazione predefinita, gli elementi inline presentano uno spazio vuoto sul lato destro; per gli elementi img, questo spazio si trova nella parte inferiore. Questo spazio non è attribuito a padding o margin. È invece uno spazio vuoto intrinseco aggiunto dai browser per garantire una distanza tra ciascun elemento.

index.html

index.html

copy
Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 9

Chieda ad AI

expand

Chieda ad AI

ChatGPT

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

Suggested prompts:

Can you explain why vertical margin and padding don't affect inline elements?

What are some examples of inline elements besides the <a> tag?

How can I make an inline element behave like a block element?

Awesome!

Completion rate improved to 2.56

bookLavorare con Elementi Inline

Scorri per mostrare il menu

Gli elementi inline rimangono su una singola riga e vanno a capo solo quando lo spazio termina. Questo comportamento è controllato dalla proprietà CSS display: inline.

Punti chiave sugli elementi inline:

  • Per impostazione predefinita hanno display: inline;
  • La loro larghezza e altezza sono determinate dal contenuto e non possono essere impostate esplicitamente;
  • È possibile applicare solo proprietà orizzontali come padding, margin e border.

Analizziamo un esempio in cui alcuni stili influenzano l'elemento, mentre altri no, all'interno del file CSS:

index.html

index.html

index.css

index.css

copy
Note
Approfondisci

Per impostazione predefinita, gli elementi inline presentano uno spazio vuoto sul lato destro; per gli elementi img, questo spazio si trova nella parte inferiore. Questo spazio non è attribuito a padding o margin. È invece uno spazio vuoto intrinseco aggiunto dai browser per garantire una distanza tra ciascun elemento.

index.html

index.html

copy
Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 9
some-alt