Opis

Postavlja količinu uvlačenja od desne ivice elementa. Pading je rastojanje od spoljne ivice desne ivice trenutnog elementa do unutrašnje ivice njegovog roditeljskog elementa (slika 1).

Sintaksa

margin-right: vrijednost | auto | nasljediti

Vrijednosti

Količina desnog paddinga može se odrediti u pikselima (px), procentima (%) ili drugim jedinicama prihvatljivim za CSS. Vrijednost može biti pozitivan ili negativan broj.

Auto Određuje da će pretraživač automatski izračunati veličinu uvlake. inherit Nasljeđuje vrijednost roditelja.

HTML5 CSS2.1 IE Cr Op Sa Fx

Rezultat ovog primjera prikazan je na sl. 2.

Rice. 2. Primjena svojstva margin-right

Objektni model

document.getElementById("elementID ").style.marginRight

Pregledači

Internet Explorer 6 udvostručuje lijevu ili desnu marginu za plutajuće elemente koji su ugniježđeni unutar nadređenih elemenata. Margina koja se nalazi uz roditeljsku stranu se udvostručuje. Problem se obično rješava dodavanjem display: inline u floated element.

Verzije Internet Explorera do i uključujući 7.0 ne podržavaju vrijednost nasljeđivanja.

U kaskadnim stilovima, dva svojstva se koriste za postavljanje uvlaka - margina i padding. Hajde da shvatimo kako oni rade.

Margina

Sjećamo se da je trenutni model blok dokumenta trenutno u upotrebi. I za svaki od blokova možemo podesiti vanjsko uvlačenje od ruba stranice, odnosno njenog nadređenog elementa. Sve ovisi o tome gdje se u html streamu nalazi ovaj blok. Radit ćemo sa DIV blokom.

U css-u, svojstvo margine za vanjsku marginu može se postaviti zasebno za svaku od četiri strane bloka. Imovina ima sljedeća značenja:

• [značenje | interes | auto]- navedite parametar uvlačenja kao broj, kao postotak ili ga ostavite na automatski
• Za svaku stranu (1-4)- u ovoj opciji za određivanje uvlačenja, možete odrediti vrijednosti u jednoj od četiri moguće opcije. 1) Jedna vrijednost za svaku stranu. 2) Prvo za gornji i donji dio bloka u isto vrijeme, zatim za desni i lijevi dio. 3) Ovdje postavljate uvlačenje od gornje ivice linije ili roditeljskog elementa, zatim istovremeno za lijevi i desni dio bloka i na kraju za donji. 4) Ovdje postavite uvlake za svaku stranu redom - gore, desno, dolje, lijevo.

Sintaksa svojstva margine izgleda ovako:

Div ( margina: 10px 10px 10px 10px; margin-left:5%; margin-right: 0,8; margin-top: auto; margin-bottom: 15px; )

Možete dodijeliti marginu za svaku stranu posebno tako što ćete je eksplicitno navesti u svojstvu margine.

Stoga, koristite ovo CSS svojstvo da postavite uvlačenje elementa od ruba stranice, reda, bloka ili roditeljskog kontejnera.

Padding

Slično svojstvo CSS-a, dodeljuje padding bloku. Sa paddingom, možete postaviti padding od sadržaja bloka do njegove granice.

Vrijednosti se postavljaju slično svojstvu margine. Ovako izgleda sintaksa:

Div ( padding: 10px 10px 10px 10px; padding-left:5%; padding-right: 0,8; padding-top: auto; padding-bottom: 15px; )

Ova dva svojstva možemo koristiti u sljedećim situacijama:

1. Uvlačenje između redova,k implementirano preko CSS-a
2. Margina stranice
3. Za dopunu za bilo koji element

Nema sličnih materijala.

Uređivanje margina i paddinga u CSS-u

• Netcracker blog,
• CSS
• HTML

U ovom članku želim vam reći kako pravilno postaviti polja(podstava) i udubljenje(margina) u CSS-u.

Prije svega, sjetimo se definicije margina i paddinga prema W3C specifikaciji. U modelu kutije, margine su udaljenost između sadržaja i ivice kutije. A padding je udaljenost između granice bloka i granice susjednog ili roditeljskog elementa.

Dakle, ako granica i pozadina elementa nisu specificirani, onda nema razlike, koristite svojstvo padding ili margin da postavite uvlake, ali pod uslovom da širina (širina) i visina (visina) elementa nisu specificirane i algoritam za izračunavanje veličina sadržaja koristeći svojstva veličine kutije.

U svakom slučaju, zapamtite da margine mogu, ali ne moraju biti uključene u širinu ili visinu elementa. Uvlake se uvijek postavljaju izvan elementa.

Pogledajmo sada kako pravilno postaviti margine i razmak između elemenata. Uzmimo sljedeći blok kao primjer.

Ovo je blok vijesti. Sastoji se od naslova, liste vijesti i linka „Još vijesti“. Dajmo im sljedeća imena klasa: news__title, news__list i news__more-link.

Budući da svaki od ovih elemenata ima iste lijeve i desne margine, bolje je postaviti margine na roditeljski blok umjesto postavljanja lijeve i desne margine za svaki element pojedinačno.

Vijesti ( padding: 20px 25px; )

Dakle, ako trebate promijeniti vrijednost polja s desne i lijeve strane, to će se morati učiniti Na jednom mestu. A kada dodate novi element unutar bloka vijesti, on će već imati potrebna udubljenja s lijeve i desne strane.

Često se dešava da svi elementi unutar bloka imaju isti padding s lijeve i desne strane, osim jednog koji uopće ne bi trebao imati padding, na primjer, zbog pozadine. U ovom slučaju, možete postaviti negativni padding za element. Tada nećete morati da uklanjate polja unutar bloka za druge elemente.

Sada morate postaviti vertikalne margine između elemenata. Da biste to učinili, morate odrediti koji je od elemenata obavezno. Očigledno, blok vijesti ne može postojati bez liste vijesti u isto vrijeme, možda ne postoji veza „Druge vijesti“ i naslov se može ukloniti, na primjer, kada se promijeni dizajn;

Uzimajući to u obzir, postavili smo uvlačenje na dnu za naslov, a uvlačenje na vrh za link “Ostale vijesti”.

News__title ( margin-bottom: 10px; ) .news__more-link ( margin-top: 12px; )

Mogli bismo postići isti vanjski rezultat dodavanjem dopuna na vrhu i dnu za listu vijesti.

News__list ( margina: 10px 0 12px 0; )

Sada morate postaviti uvlake između pojedinačnih vijesti. Opet, imajte na umu da broj vijesti može varirati i da može biti navedena samo jedna vijest.

Možete postaviti gornju uvlaku za svaku vijest osim prve, ili donju uvlaku za svaku vijest osim posljednje. Prva opcija je poželjnija jer je:first-child pseudo-selektor dodat u CSS 2.1 specifikaciju i ima širu podršku, za razliku od:last-child pseudo-selektora, koji je dodat samo u CSS 3.0 specifikaciji.

News__list-item ( margin-top: 18px; ) .news__list-item:first-child ( margin-top: 0; )

Dakle, pravilno postavljanje margina i uvlaka omogućava vam da fleksibilno promijenite izgled bilo kojeg bloka bez mijenjanja stilova i bez ometanja dizajna. Najvažnije je odrediti koji su blok elementi glavni ( obavezno), i koje opciono.

Ponekad se ne možemo osloniti na potrebne elemente. Na primjer, imamo iskačući prozor unutar kojeg se može prikazati neki naslov i tekst. Štaviše, u nekim slučajevima možda neće biti teksta, au nekim slučajevima možda neće biti naslova. Odnosno, oba elementa su opciona.

U tom slučaju možete koristiti sljedeću metodu za postavljanje uvlaka.

Popup__header + .popup__text ( margin-top: 15px; )

Tada će se uvlačenje pojaviti samo ako se koriste oba elementa. U slučaju da se prikazuje samo naslov ili samo tekst, neće biti dodatnog uvlačenja.

Sažimanje vertikalnih margina

Još jedna nijansa za koju ne znaju svi vezana je za vertikalne razmake između susjednih blokova. Definicija uvlačenja koju sam dao gore kaže da je uvlačenje udaljenost između granice trenutni i susjedni blokovi. Dakle, ako postavimo dva bloka jedan ispod drugog i jednom od njih damo donju marginu od 30px, a drugom gornju marginu od 20px, margina između njih neće biti 50px, već 30px.

To jest, udubljenja će se preklapati, a uvlačenje između blokova će biti jednako najvećem uvlačenju, a ne zbiru uvlačenja. Ovaj efekat se još naziva i "kolaps".

Imajte na umu da se horizontalne uvlake, za razliku od vertikalnih, ne „slažu“, već se zbrajaju. Polja (dopuna) su takođe sumirana.

Znajući za „urušavanje“ uvlaka, ovu funkciju možemo iskoristiti u našu prednost. Na primjer, ako trebamo uvući naslove i tekst unutar članka, tada ćemo za naslov prvog nivoa postaviti donje uvlačenje na 20px, a za naslov drugog nivoa gornja uvlaka je 20px, a donja 10px, a za svim paragrafima postavljamo gornje uvlačenje na 10px.

H1 ( margin-bottom: 24px; ) h2 ( margin-top: 24px; margin-bottom: 12px; ) p ( margin-top: 12px; )

Sada se naslov h2 može postaviti ili iza naslova h1 ili iza pasusa. U svakom slučaju, gornja margina neće prelaziti 24px.

Opća pravila

Da rezimiram, želeo bih da navedem pravila kojih se pridržavam prilikom raspoređivanja margina i uvlaka.

1. Ako susjedni elementi imaju iste margine, onda je bolje postaviti ih na roditeljski kontejner, a ne na elemente.
2. Kada postavljate uvlake između elemenata, trebali biste razmotriti da li je element obavezan ili opcioni.
3. Za listu sličnih elemenata, ne zaboravite da broj elemenata može varirati.
4. Budite svjesni vertikalnog paddinga i koristite ovu funkciju tamo gdje će vam koristiti.

Opis

Postavlja količinu dopuna sa svake ivice elementa. Margina je prostor od granice trenutnog elementa do unutrašnje ivice njegovog roditeljskog elementa (slika 1).

Rice. 1. Uvuci od lijeve ivice elementa

Ako element nema nadređenog, padding će biti udaljenost od ivice elementa do ivice prozora pretraživača, uzimajući u obzir da sam prozor takođe ima zadato podešavanje. Da biste ih se riješili, trebali biste postaviti vrijednost margine za selektor jednaka nuli.

Svojstvo margina vam omogućava da postavite vrijednost margine za sve strane elementa odjednom ili da je definirate samo za određene strane.

Sintaksa

margina: [vrijednost | interes | auto] (1,4) | nasljediti

Vrijednosti

Možete koristiti jednu, dvije, tri ili četiri vrijednosti, odvojene razmakom. Učinak ovisi o broju vrijednosti i prikazan je u tabeli. 1.

Količina uvlačenja može se odrediti u pikselima (px), procentima (%) ili drugim jedinicama prihvatljivim za CSS. Vrijednost može biti pozitivan ili negativan broj.

Auto Određuje da će pretraživač automatski izračunati veličinu uvlake. inherit Nasljeđuje vrijednost roditelja.

HTML5 CSS2.1 IE Cr Op Sa Fx

Rezultat ovog primjera prikazan je na sl. 2.

Rice. 2. Primjena svojstva margine

Objektni model

document.getElementById("elementID ").style.margin

Pregledači

Internet Explorer 6 u quirk modu ne podržava centriranje bloka pomoću automatskog pravila margine: 0. Takođe postoji greška u ovom pretraživaču sa udvostručavanjem vrednosti levog ili desnog dopuna za plutajuće elemente ugnežđene u roditeljske elemente. Margina koja se nalazi uz roditeljsku stranu se udvostručuje. Problem se obično rješava dodavanjem display: inline u floated element.

Verzije Internet Explorera do i uključujući 7.0 ne podržavaju vrijednost nasljeđivanja.

Bilješka

Za blok elemente koji se nalaze jedan pored drugog okomito, uočava se efekat kolapsa kada se uvlake ne zbrajaju, već kombinuju jedna s drugom. Sam kolaps djeluje na dva ili više blokova (jedan se može ugniježditi unutar drugog) s uvlakama na vrhu ili dnu, dok se susjedne uvlake spajaju u jedan. Za lijevi i desni padding, sažimanje se nikada ne primjenjuje.

Kolaps ne radi:

• za elemente koji imaju svojstvo paddinga postavljeno na strani koja se sažima.
• za elemente koji imaju navedenu granicu na strani koja se skuplja;
• na elementima sa apsolutnim pozicioniranjem, tj. oni čija je pozicija postavljena na apsolutnu;
• na plutajućim elementima (za koje je svojstvo float postavljeno na lijevo ili desno);
• za inline elemente;
• Za .

Danas ćemo s vama malo razgovarati o principima izgleda, odnosno o načinima organiziranja uvlačenja na vašoj web stranici za određene elemente.

Element u pitanju koji treba biti uvučen može biti tekst, slika, tabela ili bilo koji drugi HTML element. Glavna stvar je da se pridržavate nekih važnih pravila, o kojima ću vam sada reći.

Ako samo kreirate svoju web stranicu, preporučujem da umetnete sljedeća svojstva na vrh vašeg glavnog stilskog fajla:

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) *:pre, *:posle ( -webkit-box-sizing: border- box-moz-box-sizing: box-sizing: border-box;

Zašto je to potrebno, pitate se? Na vaše pitanje odgovaram jasnim primjerom.

Recimo da imate element izgleda ovako:

Ovako će izgledati opcija bez korištenja gore opisanih svojstava (gornji element) i uz njihovu upotrebu (donji element):

Šta možete vidjeti ovdje? Da je širina elementa u prvoj verziji (bez korištenja svojstava) postala veća od specificirane zbog dodanih uvlaka, što nije sasvim zgodno i ispravno u pogledu izgleda.

Opcija sa svojstvima je mnogo estetski ugodnija, ali je trebate koristiti svjesno, jer kada ih dodate na gotovu stranicu, rizikujete da dobijete loš dizajn i "glavobolju" u vidu dovođenja svega u pravi oblik . Svi projekti koje sam imao priliku voditi od nule nisu bili bez ovih nekretnina.

A sada, zapravo, razgovarajmo o opcijama za organiziranje uvlaka za elemente na vašoj web stranici s vizualnim primjerima.

Padding koristeći CSS svojstvo “padding”.

Da biste razumjeli cijelu logiku stvari, uzmimo kao primjer sljedeći fragment rasporeda:

sa svojim vlastitim stilovima:

Test_div ( širina: 250px; granica: 1px čvrsta; )

Vizuelna verzija izgleda ovako:

koja je imovina" padding"? Pomaže u organizaciji unutrašnjeg udubljenja u navedenim elementima. Dodajmo interni padding od 10px našem izgledu:

Test_div ( širina: 250px; granica: 1px čvrsta; padding: 10px; // Interni padding 10px)

Vizuelno to izgleda ovako:

Broj 10 u svojstvu znači da unutar navedenih elemenata, na svaku od njihove četiri strane, trebate dodati marginu od 10px. Pikseli (px) se mogu zamijeniti procentima ili drugim vrijednostima koje podržava CSS.

Postoje dvije opcije oznake strana sa kojih se moraju napraviti udubljenja.

Prvo- ovo je sa eksplicitnim naznakom strana:

Padding-top: 10px; // 10px gornji padding-desno: 10px; // 10px padding na desnom padding-bottom: 10px; // Interni padding 10px od donjeg padding-left: 10px; // 10px lijevi padding

U ovom slučaju, svaka strana koristi svoje vlasništvo. I sekunda:

Padding: 10px 0 0 0; // Interni padding 10px na vrhu, sve ostalo - 0px padding: 10px 0; // Interni padding 10px na vrhu i dnu, i sa strane - 0px padding: 0 10px; // Interni padding 0px gore i dno, i 10px sa strane

Evo jednostavnog popisa vrijednosti, od kojih svaka odgovara svojoj strani. Stranice su postavljene ovako: prva vrijednost je gornja, druga desna, treća donja i četvrta lijevo, odnosno sve je u smjeru kazaljke na satu.

Ako postoje dvije vrijednosti (gornja i desna), onda to znači da u ogledalu iste vrijednosti idu dolje i lijevo, i to je jedini način. Čini se da je sve jasno. Ako ne trebate postaviti uvlačenje za jednu od strana, postavite vrijednost za ovu stranu na “0”. Ova opcija mi se više sviđa, jer je kompaktnija, ali sam u svojim nastojanjima koristio prvu opciju.

Ova vrsta uvlačenja je dobra za odvajanje teksta, sadržaja ćelije tabele i drugih tekstualnih informacija. Za odvajanje samih elemenata, slično onima u gornjem primjeru, postoji još jedno svojstvo.

Margina koristeći CSS svojstvo “margin”

Posebnost nekretnine" margina" znači da se uvlačenje dodaje izvan elementa, odnosno eksterno.

Postoje i dvije opcije za dodavanje ovdje.

Prvo– sa izričitom naznakom stranke:

Margin-top: 10px; // 10px margina na gornjoj margini-desno: 10px; // 10px margina na desnoj margini-dno: 10px; // Vanjska margina 10px od donje margine-lijevo: 10px; // 10px lijeva margina

Sekunda– sa listom vrijednosti, od kojih svaka odgovara svojoj strani:

Margina: 10px 0 0 0; // Vanjska margina 10px na vrhu, sve ostalo - 0px margina: 10px 0; // Margina 10px na vrhu i dnu, i sa strane - 0px margina: 0 10px; // Vanjski padding 0px gore i dolje, i 10px sa strane

Ovdje neću opisivati ​​sve nijanse rada sa pravilima, sve je isto kao i kod imovine “ padding“, napisano o njemu iznad.

Koristimo marginu sa sljedećom vrijednošću:

Test_div (širina: 250px; granica: 1px čvrsta; margina: 10px; // Margina 10px)

Vizuelno će to izgledati ovako:

Kao što se može vidjeti iz primjera, u ovom slučaju se dodaje vanjska margina za razdvajanje navedenih elemenata.

Važna karakteristika: Ako ste pažljivo pogledali rezultat, možda ste primijetili da se susjedne uvlake elemenata ne zbrajaju. To jest, ako prvi element ima donju marginu od 10px, a drugi element ima gornju marginu iste vrijednosti, onda će ukupna udaljenost između njih također biti 10px. Ako je 10 odnosno 15, onda je ukupno 15 i tako dalje.

Ova opcija uvlačenja se često koristi u tekstu, odnosno u dizajnu pasusa, kao i u elementima koji imaju vidljive granice.

Ali oba svojstva nisu ograničena samo na ove elemente. Opcije za njihovo korištenje birate sami, ja sam samo pokušao da vam dam osnove o njima.