Kada koristiti marginu ili padding u CSS-u

Kada Koristiti Marginu Ili Padding U Css U



U CSS-u postoje dva svojstva koja se koriste za dodavanje razmaka/razmaka između elemenata: “ margina ' i ' podstava ”. Ako korisnici žele dodati razmak između div elemenata ili slika, mogu koristiti bilo koji od njih. Točnije, CSS svojstvo 'margin' daje prostor izvan elementa dok 'padding' dodjeljuje prostor unutarnjem dijelu elementa.

Ovaj post opisuje:

Kada koristiti 'padding' a ne 'margin' u CSS-u?

CSS “ margina ' i ' podstava ” svojstva se koriste za dizajn sučelja. Također se koriste za određivanje dodatnog razmaka ili prostora između elemenata. Međutim, ova dva svojstva razlikuju se jedno od drugog u smislu funkcionalnosti.







Ovdje ćemo objasniti neke razlike između oba svojstva:



margina podstava
margina pruža prostor izvan elementa. padding osigurava prostor unutar sadržaja elementa.
Marginu elementa možemo postaviti kao ' auto ” za automatsko postavljanje margine oko elementa. padding se ne može postaviti kao auto. Korisnik mora navesti vrijednosti za postavljanje prostora unutar elementa.
Margina nije utjecala na stil elementa. Kada na element primijenimo boju pozadine, to će utjecati na stil elementa.
Kao margine možemo postaviti pozitivne kao i negativne vrijednosti. padding podržava samo pozitivne vrijednosti.

Kako iskoristiti “marginu” u CSS-u?

Za korištenje ' margina ' svojstvo, prvo stvorite '

” i dodijelite klasu. Na primjer, dodijelili smo klasu pod nazivom ' Linux ”. Zatim ugradite tekst u oznaku odlomka '

”:



< div razreda = 'linux' >
< str > Linuxhint je jedno od najboljih web mjesta za poduke < / str >
< / div >

Rezultat gore navedenog koda je naveden u nastavku:





Sada stvorite još jedan '

' spremnik koji ima klasu ' margin-div ' i primijenite ' stil ' atribut kao ' obrub:1px puna crna ”. Nakon toga dodajte malo teksta u '

” oznaka:



< div razreda = 'margin-div' stil = 'border:1px full black' >
< str >Linuxhint je jedna od najboljih web stranica s uputama.< br >
< / str >
< div >

Izlaz

Sada primijenite svojstvo “margin” na klasu “.margin-div”:

.margin-div {
pozadina- boja : rgb ( 199 , 238 , 205 ) ;
font- veličina : srednji;
granica : 3px rgb ( 114 , 250 , 114 ) ;
margina: 100px 100px 100px 100px;
}

U gornjem kodu, ' .margin-div ” koristi se za pristup elementu div za primjenu dolje navedenih svojstava:

  • boja pozadine ” Svojstvo se koristi za primjenu boje u pozadini.
  • veličina fonta ” koristi se za podešavanje veličine fonta.
  • margina ” dodjeljuje prostor izvan elementa. Na primjer, postavili smo svojstvo 'margin' kao ' 100 px ”.

Ovdje možete vidjeti da smo uspješno postavili ' margina ” vlasništvo na drugom “ div ” element:

Kako koristiti “padding” u CSS-u?

Kako bi se koristilo svojstvo 'padding', korišteni su gore navedeni primjeri. U drugom “ div ' kontejner, koristite klasu ' padding-div ” za primjenu ispune:

< div razreda = 'linux' >
< str > Linuxhint je jedno od najboljih web mjesta za poduke < / str >
< / div >
< div razreda = 'padding-div' stil = 'border:1px full black' >
< str >Linuxhint je jedna od najboljih web stranica s uputama.< br >
< / str >
< / div >

Izlaz

Za primjenu ispune i drugih CSS svojstava na ' .padding-div ”, pogledajte navedeni kod:

.padding-div {
pozadina- boja : rgb ( 199 , 238 , 205 ) ;
font- veličina : srednji;
padding: 50px 50px 50px 50px;
}

U gore navedenom kodu pristupili smo drugom ' div ' element koji koristi klasu ' .padding-div ”. Postavili smo “background-color” i “font-size”. Štoviše, ' podstava ” svojstvo se koristi za dodavanje prostora oko sadržaja elementa sa svake strane kao “ 50 px ”.

Izlaz

Objasnili smo razlike i upotrebu 'padding' i 'margin' u CSS-u.

Zaključak

CSS ' margina ' koristi se za postavljanje razmaka oko elementa, dok ' podstava ” koristi se za dodavanje razmaka oko sadržaja elementa. Da biste primijenili svojstvo margine ili padding, prvo izradite ' div ” i odredite klasu. Nakon toga pristupite klasi prema nazivu klase i primijenite ' margina ' i ' podstava ' Svojstva. Ovaj post je objasnio upotrebu margine u odnosu na padding u CSS-u.