Lavorare 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
eborder
.
Analizziamo un esempio in cui alcuni stili influenzano l'elemento, mentre altri no, all'interno del file CSS:
index.html
index.css
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
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
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
Lavorare 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
eborder
.
Analizziamo un esempio in cui alcuni stili influenzano l'elemento, mentre altri no, all'interno del file CSS:
index.html
index.css
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
Grazie per i tuoi commenti!