Proprietà di visualizzazione CSS: block, inline e inline-block – e come distinguere la differenza

I browser web trattano ogni elemento come una specie di box. Tuttavia, i CSS hanno due diversi tipi di box – block e inline.

Un elemento a blocco inizia sempre su una nuova linea, e riempie lo spazio orizzontale a sinistra e a destra della pagina web. È possibile aggiungere margini e padding su tutti e quattro i lati di qualsiasi elemento di blocco – in alto, a destra, a sinistra e in basso.

Alcuni esempi di elementi di blocco sono i tag <div> e <p>. Come mostrato qui sotto, ho anche aggiunto un padding verde su tutti e quattro i lati di ogni elemento del blocco.

Elementi in linea

Gli elementi in linea non iniziano su una nuova linea, appaiono sulla stessa linea del contenuto e dei tag accanto a loro. Alcuni esempi di elementi in linea sono <span><strong>, e <img> tag.

Quando si tratta di margini e padding, i browser trattano gli elementi in linea in modo diverso. È possibile aggiungere spazio a sinistra e a destra su un elemento in linea, ma non è possibile aggiungere altezza al padding superiore o inferiore o al margine di un elemento in linea.

Gli elementi in linea possono effettivamente apparire all’interno di elementi a blocchi, come mostrato sotto. Ho aggiunto un padding bianco a sinistra e a destra di ogni elemento in linea.

Inline-Block

Gli elementi inline-block sono simili agli elementi inline, tranne che possono avere padding e margini aggiunti su tutti e quattro i lati. Dovrai dichiarare display: inline-block nel tuo codice CSS.

Un uso comune per l’uso di inline-block è la creazione di link di navigazione in orizzontale, come mostrato qui sotto. Ho creato un menu di navigazione orizzontale con un colore di sfondo arancione.

Ci sono anche molte altre proprietà di visualizzazione là fuori, che potete controllare tramite i documenti MDN.

-D.