I HTML er knapper klikkbare elementer som brukes til å utføre en spesifikk handling. De fleste knapper er plassert nær hverandre, men du kan gi plass mellom to knapper ved hjelp av CSSs marginegenskap. For dette kan du bruke margin-venstre eiendom eller margin-høyre eiendom.

I denne artikkelen vil du lære å gi plass mellom to knapper ved hjelp av CSS. Men først, lær om margin-venstre og margin-høyre egenskaper en etter en. Så la oss starte!

Hva er "margin-venstre" CSS-eiendom?

I CSS, “margin-venstre”Eiendom brukes til å skape plass fra venstre side av elementene. Elementet vil være lenger borte fra naboene hvis verdien er positiv, mens det blir nærmere naboene hvis den spesifiserte verdien er negativ.

Syntaks

Syntaksen til margin-venstre-egenskapen er som følger:

Margin-venstre: verdi

I stedet for “verdi”, Angi margen du vil gi til elementet fra venstre side.

Hva er "margin-høyre" CSS-eiendom?

“margin-høyre”Eiendom til CSS brukes til å skape plass fra høyre side av elementet. Det plasserer marginområdet på elementets høyre side. Standardverdien for margin-høyre egenskap er satt som null; Du kan imidlertid spesifisere både positive og negative verdier for det.

Syntaks

Syntaks for margin-høyre egenskap er gitt nedenfor:

Margin-høyre: verdi

Plasser "verdi”Som du vil sette som margin fra høyre side av elementet.

Hvordan gi plass mellom to knapper?

Du kan lage mellomrom mellom to knapper ved å bruke "margin-venstre”Og“margin-høyre" egenskaper. For å gjøre det, i HTML -delen, vil vi legge til en overskrift ved hjelp av

og lag to knapper med klassenavnet “BTN1”Og“Btn2”, Henholdsvis.

Html

Lag plass mellom to knapper

Klikk på meg
Klikk på meg

Standardutfallet av den gitte koden er:

Gå nå til CSS for å skape plass mellom disse to knappene.

Eksempel 1: Å gi plass mellom to knapper ved å bruke margin-høyre egenskap

Her, bruk ".BTN1”For å få tilgang til den første knappen som er lagt til i HTML og angi verdien av margin-høyre-egenskapen som“100px”.

CSS

.btn1
Margin-høyre: 100px;

Som du kan se, opprettes plass på høyre side av den første knappen:

I neste eksempel vil vi bruke "margin-venstre”Eiendom for å skape mellomrom mellom to knapper.

Eksempel 2: Å gi mellomrom mellom to knapper ved å bruke margin-venstre egenskap

Vi vil bruke “.Btn2”For å få tilgang til den andre knappen som er opprettet i HTML-filen og tilordne verdien av margin-venstre-egenskapen som“50px”:

.btn2
margin-venstre: 50px;

Ved å gjøre det opprettes plass til venstre på den andre knappen som kan sees nedenfor:

Ønsker å bruke begge egenskapene på en gang? Sjekk ut neste eksempel!

Eksempel 3: Å gi mellomrom mellom to knapper ved å bruke margin-venstre og margin-høyre egenskaper

Du kan også angi marginen til begge knappene for å gi plass mellom dem. For å gjøre det, vil vi lage plass fra høyre side av den første knappen og fra venstre side av den andre knappen ved å bruke margin-høyre og margin-venstre egenskaper, henholdsvis:

.btn1
Margin-høyre: 70px;

.btn2
Margin-venstre: 70px;

Produksjon

Vi har gitt den enkleste metoden relatert til å gi rom mellom to knapper i CSS.

Konklusjon

“margin-venstre”Og“margin-høyre”Egenskaper til CSS brukes til å gi plass mellom to knapper. Ved å bruke dette kan du justere plassen fra høyre og venstre side av knappene. I denne artikkelen har vi forklart hvordan vi kan gi plass mellom to knapper ved hjelp av to forskjellige metoder og gitt eksempler for hver av dem.