Bilder brukes til å forbedre utseendet på websider og for å designe dem effektivt. Som nettutvikler lar HTML deg legge til flere bilder og style dem på nettstedet ditt. Imidlertid er disse bildene fordelt veldig nøye, men du kan tilpasse plassen med CSS i henhold til dine preferanser.

I denne artikkelen vil vi lære:

• Legg til mellomrom mellom bilder ved å bruke "Nett”
• Legg til mellomrom mellom bilder ved å bruke "Flex”
• Legg til mellomrom mellom bilder ved å bruke "margin”

For å skape rom mellom bilder, først, sjekk ut metoden for å legge til bilder i HTML, og så vil vi skape plass mellom dem.

Så la oss komme i gang!

Hvordan du legger til bilder i div?

For å legge til bilder i Div, først, vil vi lage en beholder ved hjelp av "”Merk og tilordne klassenavnet som“div”. Inne i taggen vil vi legge til en overskrift

. Deretter oppretter du et underdivklassenavn som "img”Der vi vil legge til seks bilder ved å bruke taggen og spesifisere bildekilden i den.

Html

Legg til mellomrom mellom bilder

I CSS -filen, bruk "div”For å få tilgang til den opprettede beholderen i HTML. Vi vil justere høyden på divet som "bil”For å la diven ordne seg automatisk i henhold til elementene. For å style div, legg til bakgrunnsfargen som “RGB (170, 138, 172)”Og sett grensebredden som“10px”, Stil som“spor”, Og farge som“RGB (77, 0, 80)”. Vi vil også sette fargen på overskriften som "RGB (77, 0, 80)”.

CSS

div
Høyde: Auto;
Bakgrunn: RGB (170, 138, 172);
Grense: 10px Groove RGB (77, 0, 80);
Farge: RGB (77, 0, 80);

Her kan du se at bildene er lagt til i DIV, men de er ikke organisert og ikke har lik plass mellom dem:

Nå vil vi skape plass mellom disse bildene ved å bruke tre forskjellige metoder.

Metode 1: Legg til mellomrom mellom bilder ved å bruke "rutenett"

For å legge til plass mellom bilder, bruk CSS “vise”Eiendom og angi verdiene som“Nett”, Som vil justere elementet i en rutenettbeholder.

Syntaks

Syntaksen til displayegenskapen er:

Display: rutenett;

La oss fortsette det forrige eksemplet og skape plass mellom bilder.

Eksempel

Vi vil sette verdien av visningsegenskapen som “Nett”For å vise bilder i en rutenettform. Opprett deretter tre kolonner ved å bruke "rutenett-template-kolonner”Eiendom og tre rader som bruker“rutenett-template-rader”. Sett deretter brøkene som "1fr”,“1fr”, Og“1fr”For både rader og søyler, noe som betyr at de har fått like plass. Etter det, bruk "kolonne-gap”Og“rad-gap”Egenskaper for å skape et rom og sette verdien som“25px”:

IMG
Display: rutenett;
rutenett-template-kolonner: 1fr 1fr 1fr;
rutenett-Template-Rows: 1FR 1FR 1FR;
Row-gap: 25px;
kolonne-gap: 25px;

Her kan du se at plassen opprettes mellom bilder, men når vi endrer størrelsen på nettleseren, påvirker den utformingen av bildene:

La oss gå til den andre metoden!

Metode 2: Legg til mellomrom mellom bilder ved å bruke "flex"

Som en del av CSS kan visningsegenskapen settes til “Flex”. Denne funksjonen muliggjør fleksibilitet og justerbarhet av innholdet eller elementene. Det skaper også like mellomrom mellom elementer, slik at elementer kan ordnes effektivt.

Syntaks

Display: Flex

I henhold til syntaks ovenfor er verdien av displayegenskapen satt som "Flex”.

Så la oss sjekke ut eksemplet for å legge til mellomrom mellom bilder ved hjelp av flex.

Eksempel

Vi vil fortsette det forrige eksemplet og sette tre bilder i Div. Etter det, sett verdien av visningsegenskapen som “Flex”Og gapet mellom ikoner som“25px" bruker "mellomrom”Eiendom:

.IMG
Display: Flex;
Gap: 25px;

Du kan observere at bildene er atskilt med plass, men når nettleseren er endret, blir bildene avskåret fra kantene:

For å overvinne den ovennevnte begrensningen, “margin”Eiendom brukes.

Metode 3: Legg til mellomrom mellom bilder ved å bruke "margin"

Bruker "margin”Eiendom, du kan lage mellomrom mellom bilder i CSS. Det legger til et gjennomsiktige område rundt et element. Du kan stille marginen fra et elements venstre, høyre, topp- og bunnsider. Mer spesifikt er det en kortfattet eiendom for “margin-venstre”,“margin-høyre”,“margin-topp”, Og“marginbunn”. Alle verdiene til de gitte egenskapene kan settes i en linje.

Syntaks

Syntaks for marginegenskapen er:

Margin: Auto | Øverst til høyre nederst til venstre

Beskrivelsen av den ovennevnte syntaks er gitt nedenfor:

• Auto: Det brukes til å justere elementer i henhold til nettleseren.
• topp: Den spesifiserer margen fra toppen.
• Ikke sant: Det brukes til å sette marginen fra høyre.
• knapp: Den brukes til å justere marginen fra bunnen.
• venstre: Den spesifiserer margen fra venstre.

Merk: Å legge til to verdier vil spesifisere marginene fra topp og bunn, så vel som fra venstre og høyre; Å legge til en verdi vil imidlertid bruke marginen på alle fire sider.

Fortsetter det forrige eksemplet, vil vi nå skape plass mellom bilder.

Eksempel

Her vil vi bruke “img”For å få tilgang til bildene som er lagt til i HTML og sett bredden og høyden på bildene som“150px”. Etter det vil vi sette margin-toppen som “0px”, Margin-høyre som“10px”, Margin-bottom som“30px”Og margin-venstre som“20px”:

IMG
Bredde: 180px;
Høyde: 180px;
Margin: 0px 10px 30px 20px;

Den gitte utgangen viser at plassen opprettes og utformingen av bildene ikke blir forstyrret, eller at bildene ikke blir avskåret når nettleseren er endret størrelse:

Det er det! Vi har forklart metoden for å legge til mellomrom mellom bilder ved hjelp av tre forskjellige metoder.

Konklusjon

Tre forskjellige metoder for CSS kan brukes til å skape avstand mellom bilder, nemlig "Nett”Og“Flex”Verdier for visningsegenskapen og“margin”Eiendom. Med disse egenskapene kan du lage mellomrom mellom bilder. Imidlertid fungerer CSS Margin -eiendommen best. I denne håndboken har vi forklart disse tre metodene i detalj og gitt eksempler for hver metode.