Zapamtimo zauvijek: koja je razlika između margine i paddinga. Padding, Margin and Border - postavljamo unutarnje i vanjske margine u CSS-u, kao i granice za sve strane (gornja, donja, lijeva, desna) padding CSS sintakse

Ovo svojstvo može imati jednu do četiri vrijednosti.

Na slici, svijetlo siva boja označava područje za koje je odgovorno svojstvo paddinga:

Kada odredite četiri vrijednosti(5px 10px 15px 20px ) - redoslijed dopuna bit će sljedeći: Vrh(5px) - Pravo(10px) - dno(15px) - Lijevo(20 piksela). Da biste zapamtili redoslijed uvlačenja u jednoj deklaraciji, možete koristiti englesku riječ TR ou BL e (gdje T-vrh, R-pravo, B- dno, L- lijevo).

Kada odredite tri značenja(5px 10px 15px) - redoslijed dopuna bit će sljedeći: Vrh(5px) - Desno lijevo(10px) - dno(15 piksela).

Kada odredite dvije vrijednosti(5px 10px) - prva vrijednost (5px) će postaviti veličinu dopuna od vrha i dna sadržaja elementa, druga (10px) vrijednost će postaviti dopunu lijevo i desno od sadržaja elementa.

Kada odredite jedna vrijednost(5px) - padding na svim stranama bit će iste veličine - 5px.

Podrška za preglednik

Vlasništvo			Opera		IExplorer	rub
padding	1.0	1.0	3.5	1.0	4.0	12.0

CSS sintaksa:

padding: "dužina | početna | naslijediti" ;

JavaScript sintaksa:

object.style.padding = "5px"

Vrijednosti svojstva

CSS verzija

CSS1

Naslijeđeno

Ne.

Animirani

Da.

Primjer upotrebe

Ispuna elementa.

class="primer">

Pojedite još ovih mekih francuskih rolada i popijte malo čaja.

Izvor: margina ili padding?
Filip Šporer.
Prijevod: vl49.

Kada je bolje koristiti margine, a kada podmetanje za potrebe oblikovanja, i je li to važno?

Mučio sam se jako dugo u potrazi za prikladnim odgovorima. I tek nakon što sam napisao mnogo strašnog, nečitljivog CSS koda, popraćenog raznim nuspojavama, mogao sam sa sigurnošću reći da sam pronašao temeljna željezna pravila u vezi s gore navedenim pitanjima.

Za ilustraciju, pogledajmo tipičnu situaciju koja je vjerojatno poznata svakom developeru korisničkog sučelja u 2017. godini. Imamo najjednostavniji predložak kartice.

U ovom primjeru mogu se razlikovati dvije vrste intervala:

između karata (plava);

između kartica i njihovog spremnika (zeleno);

Ovdje je vrlo važno shvatiti da imamo posla s dva različita pojma, koji ne bi trebali biti međusobno povezani prilikom povezivanja. Odnosno, ako trebam promijeniti udaljenost između kartica i njihovog spremnika, na primjer, do 24 piksela, onda to ni na koji način ne bi trebalo utjecati na razmak između samih kartica.

Implementirati primjer s CSS-om?

Postoje doslovno tisuće načina za stvaranje takvog predloška korištenjem margina i paddinga, ali bih vam želio predstaviti jedan od njih koji pokazuje ispravnu upotrebu svojstava margine i paddinga. Štoviše, ova metoda vam omogućuje da kasnije dodate druge kartice.

Kontejner (
padding: 16px
}
.kartica + .kartica(
margina: 0 0 0 8px;
}

Samo 2 selektora i 2 pravila.

Koja je funkcija znaka plus?

Simbol + predstavlja susjedni selektor. Pokazuje samo na element koji odmah slijedi element specificiran prije ovog selektora.

Kao što možete vidjeti na gornjoj slici, u našem slučaju ovaj selektor će odabrati svaka karta kojoj prethodi svaka druga karta. Dakle, sa susjednim selektorom možemo postaviti lijevu marginu za svaku karticu osim prve.

To znači da imamo mogućnost dodati bilo koji broj karata koji nam je potreban, a udaljenost između kojih će uvijek biti osam piksela.

Sve radi dobro dok ne trebamo staviti nešto osim kartice pored kartica. Pa, recimo gumb "Dodaj karticu" ("Dodaj karticu"):

Na temelju CSS isječka koji već imamo, vjerojatno ne bismo novom elementu koji predstavlja gumb dali klasu .card, budući da to nije kartica. Kako biti? Isplati li se stvoriti dodatni naziv klase .add-card, koji sadrži isto pravilo sa svojstvom margine kao i klasa .card? Ne, postoji bolje rješenje.

Lobotomizirana sova *++ .

I kako to izgleda. Unatoč smiješnoj asocijaciji, ova metoda odlično funkcionira i koristim je cijelo vrijeme otkako sam saznala za nju. Dakle, čemu sve ovo? Evo pogleda relevantnog CSS koda:

Kontejner (
padding: 16px
}
/* Pa, jeste li prepoznali lobotomiziranu sovu? */
.spremnik > * + * (
margina: 0 0 0 8px;
}

Kao što se vjerojatno sjećate, prethodni selektor primjenjivao se na bilo koju kartu kojoj je prethodila druga karta. Sada uz njegovu pomoć možemo formatirati svaki element kojem neposredno prethodi bilo koji drugi element, uključujući gumb, naravno.

Eventualno.

Iskreno se nadam da vam je ovdje predstavljeni materijal pomogao da shvatite kada upotrijebiti padding za odvajanje sadržaja sadržanog u spremniku, a kada koristiti margine.

Kao zaključak, želio bih vam predstaviti na razmatranje projekt olovke koji pokazuje gore navedene primjere, kao i dva pravila koja su testirana mojim vlastitim iskustvom. Dakle, koristimo:

padding- za razmake između spremnika i njegovog sadržaja.

margina- za praznine između elemenata unutar spremnika.

Broj pregleda: 427

Ovaj vodič će vam pomoći da bolje razumijete CSS svojstva kao što su obrub, padding i margina. Ova svojstva su vrlo korisna za programere da pozicioniraju elemente na stranici prema izgledu.

Kreirajmo div i dajmo mu svojstva margine, padding i obrub.

Padding Svojstvo

CSS svojstvo padding definira udaljenost između obruba elementa i njegovog sadržaja. Možete ga definirati ovako:

padding-top: 10px;
padding-desno: 10px;
padding-bottom: 10px
padding-left: 10px

Ovaj unos se može skratiti:

padding:25px 50px 75px 100px;
- vrh 25px
- desno 50px
- dolje 75px
- lijevo 100px
padding:25px 50px 75px;
- vrh 25px
- desno i lijevo 50px
- dolje 75px
padding:25px 50px;
- gornji i donji 25px
- desno i lijevo 50px
padding:25px;
- sve 25px

Napomena: Vrijednost dopuna dodaje se širini elementa i ovisi o pozadini elementa.

Drugim riječima, imamo div element s klasom div-1:

Div.div-1( širina:150px; padding: 25px;)

Preglednik će dodati lijevi i desni padding širini elementa. Kao rezultat, dobit ćemo element širine 200px.

Granično vlasništvo

Svojstvo CSS obruba omogućuje vam definiranje stila i boje obruba elementa.

granica-širina

Svojstvo border-width koristi se za određivanje širine obruba. Širina je navedena u pikselima ili pomoću jedne od unaprijed definiranih vrijednosti: tanko (tanko), srednje (srednje) ili debelo (debeo).

boja obruba

Svojstvo border-color koristi se za definiranje boje obruba. Boja se može postaviti na sljedeće načine:

naziv - naziv boje, na primjer, "crvena"
RGB - definira RGB vrijednost, na primjer "rgb(255,0,0)"
Hex - definira heksadecimalnu vrijednost, na primjer, "#ff0000"

obrubni stil

točkasta: Definira preciznu granicu
isprekidana: Definira točkasti obrub
čvrsta: Definira debelu granicu
dvostruko: Definira dvije granice. Udaljenost između njih ovisi o vrijednosti granice širine
utor: Definira trodimenzionalni uvučeni obrub
greben: Definira 3D podignuti obrub
umetnuti: Definira granicu tako da se blok ljulja uvučeno
na početku: Definira granicu tako da se blok titra konveksno

Svojstva obruba elementa možete napisati na skraćeni način:

Div.div-2( granica:1px čvrsta #ccc; )

Svojstvo marže

Svojstvo CSS margine definira razmak oko elementa. Margina oslobađa nešto prostora oko elementa (izvan granice). Margina nema boju pozadine i uvijek ostaje prozirna.

Možete definirati vrijednosti margine za element poput ovoga:

margin-top:100px;
margin-bottom:100px;
margin-desno:50px;
margin-left:50px;

Ovaj unos se može skratiti:

margina:25px 50px 75px 100px;
- gornja margina 25px
- desna margina 50px
- donja margina 75px
- lijeva margina 100px
margina:25px 50px 75px;
- gornja margina 25px
- desna i lijeva margina 50px
- donja margina 75px
margina:25px 50px;
- gornja i donja margina 25px
- desna i lijeva margina 50px
margina:25px;
- sve četiri margine 25px

Koristeći zadane vrijednosti margine, okvir možete centrirati vodoravno.

U prethodnom poglavlju spomenuli smo CSS svojstva kao što su margina (polje) i padding (uvlaka). Sada ćemo se detaljnije zadržati na njima i razmotriti kako se međusobno razlikuju i koje značajke imaju.

Možete stvoriti praznine između elemenata na oba načina, ali ako je padding uvlačenje od sadržaja do ruba bloka, tada je margina udaljenost od jednog bloka do drugog, međublokovni prostor. Snimak zaslona prikazuje dobar primjer:

Padding odvaja sadržaj od granice bloka, a margina stvara praznine između blokova

Kao što možete vidjeti, CSS margine i padding se razlikuju, iako je ponekad bez gledanja koda nemoguće odrediti koje se svojstvo koristi za postavljanje udaljenosti. To se događa kada nema okvira ili pozadine za blok sadržaja.

Da biste postavili marginu ili padding u CSS-u sa svake strane elementa, postoje sljedeća svojstva:

Uvlake:

podstava gornji dio: značenje;
padding-desno: značenje;
padding-bottom: značenje;
padding-lijevo: značenje;

Polja:

margin-top: značenje;
margin-desno: značenje;
margin-bottom: značenje;
margin-lijevo: značenje;

Vrijednosti se mogu navesti u bilo kojoj CSS jedinici - px, em, %, itd. Primjer: margin-top: 15px .

Postoji i vrlo zgodna stvar poput CSS skraćenica za margine i padding. Ako trebate postaviti margine ili padding za sve četiri strane elementa, nije potrebno pisati svojstvo za svaku stranu zasebno. Sve je pojednostavljeno: za margine i padding možete odrediti 1, 2, 3 ili 4 vrijednosti odjednom. Kako su postavke raspoređene ovisi o broju vrijednosti:

4 vrijednosti: padding je postavljen za sve strane elementa sljedećim redoslijedom: gore, desno, dolje, lijevo: padding: 2px 4px 5px 10px;
3 vrijednosti: padding se postavlja prvo za gornju stranu, zatim za lijevu i desnu, a zatim za donju: padding: 3px 6px 9px;
2 vrijednosti: padding se postavlja prvo istovremeno s gornje i donje strane, a zatim - istovremeno za lijevu i desnu stranu: padding: 6px 12px;
1 vrijednost: postavite isti padding za sve strane elementa: padding: 3px;

Ista pravila vrijede za svojstvo margine CSS-a. Imajte na umu da također možete koristiti negativne vrijednosti za marginu (na primjer, -3px), što ponekad može biti vrlo korisno.

kolapsirajuća margina

Zamislite situaciju: dva blok elementa nalaze se jedan na drugom i daju im se margine. Gornji blok je postavljen na marginu: 60px, a donji blok na marginu: 30px. Bilo bi logično pretpostaviti da bi se dvije granične margine dvaju elemenata jednostavno dodirnule, a kao rezultat bi razmak između blokova bio 90 piksela.

Međutim, stvari su drugačije. Zapravo, u takvoj situaciji dolazi do efekta, koji se naziva kolaps, kada se odabere najveće po veličini iz dva susjedna polja elementa. U našem primjeru, rezultirajući razmak između elemenata bit će 60 piksela.

Udaljenost između blokova jednaka je većoj vrijednosti

Sažete margine rade samo za gornje i donje margine elemenata i ne primjenjuju se na margine s desne i lijeve strane. Konačna vrijednost jaza izračunava se u različitim situacijama na različite načine:

Kada su obje vrijednosti margine pozitivne, konačna veličina margine bit će veća vrijednost.
Ako je jedna od vrijednosti negativna, tada se za izračunavanje veličine polja mora dobiti zbroj vrijednosti. Na primjer, s vrijednostima od 20px i -18px, veličina polja će biti:
20 + (-18) = 20 - 18 = 2 piksela.
Ako su obje vrijednosti negativne, uspoređuje se modul tih brojeva i bira se broj koji je veći u modulu (dakle, manji od negativnih brojeva). Primjer: želite usporediti vrijednosti polja -6px i -8px. Moduli uspoređenih brojeva su 6, odnosno 8. Iz toga slijedi da je 6 -8 . Konačna veličina polja je -8 piksela.
U slučaju kada su vrijednosti navedene u različitim CSS jedinicama, one se smanjuju na jednu, nakon čega se uspoređuju i odabire se veća vrijednost.
Veličina margine za podređene elemente još je zanimljivija: ako dijete ima veću marginu od roditelja, tada mu se daje prednost. U tom slučaju, veličine gornje i donje margine roditelja postat će iste kao postavljene za dijete. U tom slučaju neće biti udaljenosti između roditelja i djeteta.