Elementi block e inline

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 54 di 76.

In HTML, gli elementi sono classificati come elementi di blocco o in linea, in base a come vengono visualizzati nella pagina. Comprendere la differenza tra questi due tipi di elementi è fondamentale per creare layout ben strutturati e visivamente gradevoli. Esploriamo le caratteristiche e i comportamenti degli elementi di blocco e in linea.

Elementi a livello di blocco

Un elemento di livello blocco inizia sempre su una nuova riga e occupa tutta la larghezza disponibile, estendendosi il più possibile verso sinistra e verso destra. Crea un «blocco» di contenuto.

Gli esempi di elementi a livello di blocco includono:

<div>
<h1> - <h6>
<p>
<ul>, <ol>, <li>
<form>
<table>
<header>, <footer>, <section>, <article>, <nav>

Elementi in linea

Un elemento in linea non inizia su una nuova riga e occupa solo la larghezza necessaria per contenere il suo contenuto. Consente agli elementi in linea di scorrere all'interno di una riga di testo o di un elemento a livello di blocco.

Esempi di elementi inline includono:

<span>
<a>
<img>
<strong>, <em>
<input>, <button>, <label>
<textarea>

Sfida

Facile

Ti viene fornito un documento HTML con vari elementi. Il tuo compito è identificare quali elementi sono di blocco e quali sono in linea, quindi applicare alcune regole CSS di base per evidenziarne le differenze. Segui i passaggi seguenti:

Scrivi una regola CSS che selezioni tutti gli elementi di blocco (div, p, h1). Imposta il loro background-color su lightgray e aggiungi un border di 1px solid blue.
Scrivi una regola CSS che selezioni tutti gli elementi in linea (span, a, img). Imposta il loro background-color su lightyellow e aggiungi un border di 1px solid red.

Osserva come gli elementi di blocco occupano tutta la larghezza disponibile e iniziano su nuove righe, mentre gli elementi in linea occupano solo lo spazio necessario e si dispongono all'interno della riga.

Provalo tu

<html>
<head>
    <title>Block vs Inline Elements</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a div element.</div>
    <p>This is a paragraph with a <span>span element</span> inside.</p>
    <h1>This is a heading element.</h1>
    <a href="#">This is a link</a>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image" width="100">
</body>
</html>