Polstring og marginklasser i bootstrap 5

Polstring og marginklasser i bootstrap 5
Margin og polstring er unike egenskaper til CSS som legger til mellomrom mellom beholderen og dens innhold. For enkel forståelse legger marginegenskapen plasser utenfor boksen mens polstring legger til mellomrom inne i boksen.

I denne artikkelen vil du lære om

  • Margin-auto-klasser
  • Marginklasser med størrelser
  • Polstringsklasser med størrelser

Vilkår som brukes til å bruke margin og polstring i bootstrap 5

Marginer og polstring kan brukes på HTML -elementene ved hjelp av Bootsrap -klassene og for å gi riktig klasse du må forstå følgende begrep:

  • m referere som margin
  • p referere som polstring
  • t Henvis som topp
  • b referere som bunn
  • s Henvis som start
  • e Henvis til slutt

For å ha bedre forståelse av disse begrepene, ta en titt på følgende eksempler.

Margin-auto-klasser

Følgende marginklasser brukes til å legge til mellomrom mellom elementene i beholderen automatisk.

M-Auto

.M-Auto Klassen gir margin fra alle sidene høyre, venstre, øverst og bunn.

Kode




Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


I eksemplet ovenfor brukte vi M-Auto klasse på oransje div som gir lik plass fra alle sider av diven.

MS-Auto

.MS-Auto Klassen legger til plass fra venstre side av div og MS står for marginstart.

Kode




Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


I eksemplet ovenfor brukte vi MS-Auto klasse på oransje div som gir plass fra venstre side av div.

Me-Auto

.Me-Auto Klassen legger til plass fra høyre side av div og meg står for marginenden.

Kode




Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


I eksemplet ovenfor brukte vi M-Auto klasse på oransje div som gir plass fra høyre side av div.

Marginklasser med størrelser

Følgende marginklasser brukes til å legge til mellomrom mellom elementene i beholderen i henhold til brukerkravet.

margin-topp

.MT-størrelse Klassen gir margin fra oversiden, størrelsen kan erstattes med 0/1/2/3/4/5.

Kode




Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


I eksemplet ovenfor

  • Oransje boks bruk .MT-0 som betyr ingen margin fra toppen
  • Pink Box bruker .MT-1 som betyr margin fra toppen er 0.25
  • Bruk av blå boks .MT-2 som betyr margin fra toppen er 0.5
  • Grønn boks bruker .MT-3 som betyr margin fra toppen er 1
  • Bruk av hudboks .MT-4 som betyr margin fra toppen er 1.5
  • Aqua Box bruker .MT-5 som betyr margin fra toppen er 3

marginbunn

.MB-størrelse Klasse gir margin fra bunnsiden, størrelsen kan erstattes med 0/1/2/3/4/5.

Kode




Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


marginstart

.meg-størrelse Klasse gir margin fra venstre side, størrelse kan erstattes med 0/1/2/3/4/5.

Kode




Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


marginend

.meg-størrelse Klasse gir margin fra høyre side, størrelse kan erstattes med 0/1/2/3/4/5.

Kode




Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Å bruke .MT-0/1/2/3/4/5 klasse for forskjellige skjermer bare bruk .MT-XXL/LG/MD/SM-0/1/2/3/4/5.

Polstringsklasser med størrelser

Følgende polstringsklasser brukes til å legge til mellomrom mellom innholdet og beholderen i henhold til brukerkravet.

Padding-top

.PT-størrelse Klasse gir polstring fra oversiden, størrelse kan erstattes med 0/1/2/3/4/5.

Kode




Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


I eksemplet ovenfor

  • Oransje boksbruk .PT-0 som betyr ingen polstring fra toppen
  • Pink Box bruker .PT-1 som betyr polstring fra toppen er 0.25
  • Bruk av blå boks .PT-2 som betyr polstring fra toppen er 0.5
  • Grønn boks bruker .PT-3 som betyr polstring fra toppen er 1
  • Bruk av hudboks .PT-4 som betyr polstring fra toppen er 1.5
  • Aqua Box bruker .PT-5 som betyr polstring fra toppen er 3

Padding-Bottom

.PB-størrelse Klasse gir polstring fra bunnsiden, størrelse kan erstattes med 0/1/2/3/4/5.

Kode




Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Padding-start

.PS-størrelse Klasse gir polstring fra venstre side, størrelse kan erstattes med 0/1/2/3/4/5.

Kode




Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Padding-end

.PE-størrelse Klasse gir polstring fra høyre side, størrelse kan erstattes med 0/1/2/3/4/5.

Kode




Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Denne artikkelen handler om bootstrap polstring og marginklasser for å gi dere detaljerte kunnskaper om hvordan du kan gi margin og polstring i Bootstrap 5 ved hjelp av klasser.


Å bruke .PT-0/1/2/3/4/5 klasse for forskjellige skjermer bare bruk .PT-XXL/LG/MD/SM-0/1/2/3/4/5.

Konklusjon

For å gi bruk av automatisk margin .Mt-Auto, .MS-Auto, .Me-Auto klasser, for å gi margin i henhold til størrelsen bruk, .MT/B/E/S-0/1/2/3/4/5,og å bruke marginklasser med størrelser på forskjellige skjermbilder .MT // B/E/S-XXL/LG/MD/SM-0/1/2/3/4/5. For polstring i henhold til størrelser bruk .PT/B/E/S-0/1/2/3/4/5 eller hvis du vil gi polstring i henhold til forskjellige skjermstørrelser .PT // B/E/S-XXL/LG/MD/SM-0/1/2/3/4/5.