Aggiungi spazio tra elementi HTML solo usando CSS

Lo spazio tra l'elemento HTML svolge un ruolo cruciale nei documenti. È difficile per un utente scansionare rapidamente una pagina e determinare cosa è collegato e cosa non è se non ci sono lacune. Pertanto, mantenere uno spazio tra tutti gli elementi nel documento è importante. A tale scopo, ci sono diversi metodi utilizzati in ogni lingua per aggiungere spazio tra gli elementi, incluso CSS.

Questo tutorial dimostrerà il metodo per aggiungere spazio tra elementi HTML usando le proprietà CSS.

Come aggiungere/inserire spazio tra elementi HTML solo usando CSS?

Per aggiungere spazio tra elementi HTML solo usando CSS, utilizzare il “"Elemento per aggiungere dati alla pagina HTML. Quindi, accedi all'elemento e applica "Schermo"Con i valori"griglia","ROWS-TEMPLATE ROWS/Colonna", E "griglia-gap"Proprietà CSS.

Per fare ciò, segui la procedura menzionata.

Passaggio 1: crea un contenitore div

Innanzitutto, utilizza il “"Elemento per creare un contenitore div nella pagina HTML. Inoltre, inserire un attributo di classe e specificare un nome per l'elemento classe per un uso successivo.

Passaggio 2: creare contenitore di div nidificato

Successivamente, crea un altro contenitore Div seguendo la stessa procedura.

Passaggio 3: aggiungere i dati utilizzando l'elemento "span"

Dopodiché, usa il “"Elemento tra il contenitore Div nidificato per inserire i dati:

Articolo 1
Articolo 2
Articolo 3





Articolo 4
Articolo 5
Articolo 6

Passaggio 4: contenitore "div" stile

Accedi al contenitore di div principale con l'aiuto del nome della classe come ".principale":

.principale
bordo: 4px verde solido;
imbottitura: 30px;
Margine: 40px;

Quindi, applica le seguenti proprietà:

• "confine"La proprietà viene utilizzata per specificare il limite attorno all'elemento.
• "imbottitura"Assegna il lato esterno dello spazio dell'elemento in un bordo definito.
• "margine"Determina lo spazio in una pagina HTML attorno al bordo definito.

Produzione

Passaggio 5: contenitore "span" di stile

Ora, accedi al "arco"Container e applicare le proprietà CSS menzionate nel blocco del codice seguente:

span
Bordo: 3px Groove Blue;
Background-color: RGB (240, 224, 137);
Testo-align: centro;

Qui:

• "colore di sfondo"La proprietà definisce il colore sul retro dell'elemento.
• "allineamento"È utilizzato per l'impostazione dell'allineamento del testo nell'elemento definito.

Passaggio 6: aggiungi spazio tra elementi nella colonna

Ora, utilizza il "id"Selettore"#"E il valore del" id"Per accedere al contenitore. Quindi, applica le proprietà di seguito per aggiungere spazio tra gli elementi:

#colonna
display: griglia;
Margine: 20px 40px;
colonne a griglia-template: ripetizione (riempimento automatico, auto);
GRID-GAP: 14px;

Qui:

• "Schermo"La proprietà determina il comportamento di visualizzazione dell'elemento di accesso. Per fare ciò, il valore di questa proprietà è impostato come "griglia". Il layout della griglia CSS definisce un sistema di griglia multidimensionale a CSS.
• "colonne a griglia"Assegna il numero e la dimensione delle colonne all'interno del contenitore della griglia.
• "griglia-gap"Aggiunge spazio tra elementi che funziona solo sugli articoli della griglia.

Passaggio 7: aggiungi spazio tra elementi nelle righe

Ora, accedi al contenitore DAV interno con l'aiuto del valore ID e applica le proprietà CSS:

#rows
display: griglia;
Margine: 20px 40px;
GRID-TEMPLATE ROWS: ripetizione (riempi automatica, auto);
GRID-GAP: 20px;

Quindi, applica il "Schermo","margine","griglia-gap", E "ROWS GRID-TEMPLATE" proprietà. IL "ROWS GRID-TEMPLATE"Definire l'altezza e il numero delle file in un layout dichiarato della griglia:

Hai imparato ad aggiungere spazio tra elementi HTML con solo proprietà CSS.

Conclusione

Per aggiungere lo spazio tra elementi HTML solo usando CSS, utilizzare il “"Elemento per aggiungere dati alla pagina HTML. Quindi, accedi all'elemento e applica "Schermo"Con i valori"griglia","ROWS-TEMPLATE ROWS/Colonna", E "griglia-gap"Proprietà CSS utilizzate. Questo articolo ha spiegato la procedura per l'aggiunta dello spazio tra elementi HTML solo usando CSS.