Le immagini vengono utilizzate per migliorare l'aspetto delle pagine Web e per progettarle in modo efficace. Come sviluppatore web, HTML ti consente di aggiungere più immagini e modellarle sul tuo sito Web. Tuttavia, queste immagini sono distanziate da vicino per impostazione predefinita, ma puoi personalizzare lo spazio con CSS secondo le tue preferenze.

In questo articolo, impareremo:

• Aggiungi spazio tra le immagini usando "griglia"
• Aggiungi spazio tra le immagini usando "flettere"
• Aggiungi spazio tra le immagini usando "margine"

Per creare spazio tra le immagini, prima, controlla il metodo per aggiungere immagini in HTML, quindi creeremo spazio tra loro.

Quindi iniziamo!

Come aggiungere immagini in div?

Per aggiungere immagini nel Div, in primo luogo, creeremo un contenitore usando ""Tag e assegna il nome della classe come"div". All'interno del tag, aggiungeremo un'intestazione

. Successivamente, crea un nome di classe sub-div come "img"In cui aggiungeremo sei immagini utilizzando il tag e specificare la sorgente di immagine in esso.

Html

Aggiungi spazio tra le immagini

Nel file CSS, usa "div"Per accedere al contenitore creato in HTML. Regoleremo l'altezza del div come "auto"Per consentire al Div di organizzarsi automaticamente in base ai suoi elementi. Per modellare il div, aggiungi il colore di sfondo come "RGB (170, 138, 172)"E imposta la larghezza del confine come"10px", Stile come"scanalatura”, E colore come"RGB (77, 0, 80)". Imposteremo anche il colore dell'intestazione come "RGB (77, 0, 80)".

CSS

div
Altezza: auto;
Background: RGB (170, 138, 172);
Bordo: 10px Groove RGB (77, 0, 80);
Colore: RGB (77, 0, 80);

Qui, puoi vedere che le immagini vengono aggiunte nel Div ma non sono organizzate e non hanno uno spazio uguale tra di loro:

Ora creeremo spazio tra queste immagini usando tre diversi metodi.

Metodo 1: aggiungi spazio tra le immagini usando "griglia"

Per aggiungere spazio tra le immagini, utilizzare il CSS "Schermo"Proprietà e imposta i suoi valori come"griglia", Che regolerà l'elemento in un contenitore a griglia.

Sintassi

La sintassi della proprietà del display è:

display: griglia;

Continuiamo l'esempio precedente e creiamo spazio tra le immagini.

Esempio

Imposteremo il valore della proprietà di visualizzazione come "griglia"Per visualizzare le immagini in forma di griglia. Quindi, crea tre colonne usando "colonne a griglia"Proprietà e tre file usando il"ROWS GRID-TEMPLATE". Quindi, imposta le frazioni come "1fr","1fr", E "1fr"Per le righe e le colonne, il che significa che hanno acquisito uguale spazio. Dopodiché, utilizza il "colonna-gap" E "gap a fila"Proprietà per creare uno spazio e impostare il suo valore come"25px":

img
display: griglia;
colonne griglia-template: 1fr 1fr;
ROWS GRID-TEMPLATE: 1FR 1FR 1FR;
ROW-GAP: 25px;
colonna-gap: 25px;

Qui, puoi vedere che lo spazio è creato tra le immagini, ma quando ridimensioniamo il browser influenza il layout delle immagini:

Passiamo al secondo metodo!

Metodo 2: Aggiungi spazio tra le immagini usando "Flex"

Come parte di CSS, la proprietà del display può essere impostata su "flettere". Questa funzione consente la flessibilità e la regolabilità del contenuto o degli elementi. Crea anche uguale spazio tra elementi, consentendo di organizzare in modo efficiente elementi.

Sintassi

Visualizza: Flex

Secondo la sintassi sopra, il valore della proprietà display è impostato come "flettere".

Quindi, controlliamo l'esempio per aggiungere spazio tra le immagini usando Flex.

Esempio

Continueremo l'esempio precedente e imposteremo tre immagini nel div. Successivamente, imposta il valore della proprietà di visualizzazione come "flettere"E il divario tra le icone come"25px" usando il "spacco" proprietà:

.img
display: flex;
GAP: 25px;

Puoi osservare che le immagini sono separate dallo spazio, ma quando il browser è ridimensionato, le immagini vengono tagliate dai bordi:

Per superare la limitazione sopra menzionata, il "margine"La proprietà viene utilizzata.

Metodo 3: aggiungi spazio tra le immagini usando "margine"

Usando il "margine"Proprietà, puoi creare spazio tra le immagini in CSS. Aggiunge un'area trasparente attorno a un elemento. È possibile impostare il margine dai lati sinistro, destro, superiore e inferiore di un elemento. Più specificamente, è una proprietà shorthand per "margine-sinistra","margine-destra","margine-top", E "margin-bottom". Tutti i valori delle proprietà fornite possono essere impostati in una riga.

Sintassi

La sintassi della proprietà del margine è:

Margine: Auto | In alto a destra in basso a sinistra

La descrizione della sintassi sopra fornita è riportata di seguito:

• auto: Viene utilizzato per regolare gli elementi secondo il browser.
• superiore: Specifica il margine dall'alto.
• Giusto: È usato per impostare il margine da destra.
• pulsante: Viene utilizzato per regolare il margine dal fondo.
• Sinistra: Specifica il margine da sinistra.

Nota: L'aggiunta di due valori specificherà i margini dalla parte superiore e inferiore, nonché da sinistra e destra; Tuttavia, l'aggiunta di un valore applicherà il margine a tutti e quattro i lati.

Continuando l'esempio precedente, ora creeremo spazio tra le immagini.

Esempio

Qui, useremo "img"Per accedere alle immagini aggiunte nell'HTML e impostare la larghezza e l'altezza delle immagini come"150px". Dopodiché, imposteremo il margine-top come "0px", Margine-destra come"10px", Margin-bottom come"30px"E Margin-Left come"20px":

img
larghezza: 180px;
Altezza: 180px;
Margine: 0px 10px 30px 20px;

L'output dato dimostra che lo spazio viene creato e il layout delle immagini non viene disturbato o le immagini non vengono tagliate quando il browser è ridimensionato:

Questo è tutto! Abbiamo spiegato il metodo per aggiungere spazio tra le immagini usando tre diversi metodi.

Conclusione

Tre diversi metodi di CSS possono essere utilizzati per creare spaziatura tra le immagini, vale a dire "griglia" E "flettere"Valori della proprietà di visualizzazione e"margine" proprietà. Con queste proprietà, puoi creare spazi tra le immagini. Tuttavia, la proprietà del margine CSS funziona al meglio. In questo manuale, abbiamo spiegato questi tre metodi in dettaglio e fornito esempi per ciascun metodo.