Css razlika u marginama ispune. Margina ili padding? Razmišljanja o tome šta koristiti i gdje

Pozdrav, dragi čitaoci blog stranice. Danas želim da nastavim temu proučavanja i razmotrim ona stilska pravila koja vam omogućavaju da postavite uvlake i granice za HTML elemente: ivicu, marginu i padding.

Prije toga, uspjeli smo proučiti prilično jednostavna svojstva koja su kontrolirala fontove (), tekst () i pogledali model

Da, uspjeli smo i detaljno razmotriti principe korištenja (proširujući se na nekoliko članaka). Sada je vrijeme da prijeđemo na pravila koja čine osnovu za izradu dokumenata (web stranica), a počećemo s blok modelom (odnos HTML elemenata).

Uopšteno govoreći, već sam pisao o modernoj tehnologiji, ali danas ćemo ući u čiste pojedinosti. Ako želite da pročitate prethodne publikacije na ovu temu, dobrodošli ste na .

Model okvira u CSS-u - padding, margina i granica

Treće, kamata se može koristiti. Od čega se računaju? Ispostavilo se da od širine kontejnera(odnosno iz oblasti sadržaja roditeljskog elementa). Štaviše, ovo se ne odnosi samo na marginu-desno i lijevo, što bi bilo logično, već i na margin-top i bottom, procenti će se računati upravo iz širine (a ne visine) kontejnera.

Treba napomenuti, govoreći o postavljanju dimenzionalnih vrijednosti, da Margin takođe može biti negativan. One. kada specificiramo pozitivnu vrijednost za vanjsku marginu, pomjeramo susjedni element na zadanu udaljenost, a ako specificiramo negativnu vrijednost, susjedni blok će jednostavno preklapati onaj za koji smo postavili ovo negativno uvlačenje. I ovo se vrlo često koristi u CSS-u.

Pa, podrazumijeva se da postoji prefabrikovano CSS pravilo margine, koje vam u mnogim slučajevima omogućava da smanjite veličinu koda koji se koristi za postavljanje potrebnih vanjskih margina. Redoslijed vrijednosti u njemu je strogo reguliran (napisane su kroz razmak) i moraju odgovarati primjeru:

One. nabrajanje počinje od vrha i nastavlja se u smjeru kazaljke na satu dok se krug ne završi sa desnim uvlačenjem (desno). Moglo bi izgledati otprilike ovako:

Margina:20px 10px 40px 30px;

A to će značiti da pretraživač iznad našeg bloka treba da uvuče 20 piksela, desno - 10, ispod - 40, a lijevo - 30. To jest. ovaj unos bi bio ekvivalentan:

Smanjenje CSS koda vidljivo je golim okom. Ali ovo nije granica. Sasvim je prihvatljivo koristiti ne samo četiri, već i tri, dvije, pa čak i samo jednu vrijednost u montažnom pravilu. Što će dodatno pomoći u smanjenju veličine koda. Međutim, bit će moguće smanjiti broj vrijednosti samo u određenim slučajevima:

1. Ako su margine s lijeve i desne strane iste, na primjer, ovako: margin:20px 30px 40px 30px;

   Ovo posljednje se može izostaviti:

   Margina:20px 30px 40px;

   Ova dva montažna unosa pravila rade istu stvar. Stoga, ako vidite unos sa tri vrijednosti u margini, tada se vrijednost četvrte (desno) može vidjeti u drugoj (lijevo).

   Ako su udubljenja iznad i ispod jednaka, takav trik više neće raditi, jer je logično moguće smanjiti strukturu unosa montažnog pravila, samo odsecanje duplih vrednosti sa njegovog kraja(a vrijednost donje uvlake će biti pretposljednja).

2. Ako pored jednakosti vanjskih margina s lijeve i desne strane postoji jednakost njihovih vrijednosti na vrhu i dnu: margin:20px 30px 20px 30px;

   ili, što je isto (zbog tačke 1):

   Margina:20px 30px 20px;

   Tada se takvo prefabrikovano pravilo može napisati sa samo dvije vrijednosti, odbacujući posljednju, koja se poklapa s prvom:

   Margin:20px 30px; U ovom slučaju, prva vrijednost opisuje vanjske margine okomito, a druga - horizontalno.

3. I konačno, ako su sve vrijednosti u prefab pravilu iste: margin:20px 20px 20px 20px;

   ili, što je isto (zbog tačke 2):

   Margin:20px 20px;

   To se može iskoristiti maksimalno skraćeni tip zapisa(odbacivanjem zadnje vrijednosti koja odgovara prvoj):

   Margin:20px; Što će značiti istu marginu na svim stranama našeg Html elementa.

Govoreći o vanjskim marginama, vrijedno je spomenuti takvu šemu kao "Margina-kolaps" ili, drugim riječima, „kolaps marže“. Ukratko, suština ovog fenomena je sledeća.

Ako imamo dva bloka smještena jedan ispod drugog (sažimanje margina može se dogoditi samo okomito) i oba imaju suprotne margine (na primjer, dno za gornji element i gornja margina za donji), tada će veća vrijednost margine apsorbirati onaj manji.

Na primjer, ako je gornji blok postavljen na:

Margin:20px 20px 200px 20px;

A za donji:

Margin:100px 20px 20px 20px;

Tada će donja margina gornjeg bloka (200px) apsorbirati gornju marginu donjeg (100px, pa čak i ako postane jednaka 199px, ništa se neće promijeniti) i rezultirajuća vanjska margina između ova dva bloka će i dalje biti jednaka 200px. One. samo se ona veća uzima u obzir modulo Margin, i ni na koji način se ne zbraja sa vrijednosti brojača vertikalno susjednog elementa.

Ovo je kvaka koja radi isključivo okomito, a horizontalno, suprotne dimenzije margine će se jednostavno dodati jedna drugoj. Ali ovo se odnosi samo na margine s istim predznakom, ali ako su s različitim predznacima, tada će se njihovi brojevi jednostavno zbrajati i blokovi će biti odvojeni jedan od drugog po rezultirajućoj vrijednosti.

Na primjer, u ovom slučaju:

Gornja margina:20px 20px -20px 20px; Donja margina:10px 20px 20px 20px;

Rezultirajuća margina između blokova će biti -10px, tj. donji će preklapati gornji Html element za 10px.

Još jedna karakteristika korištenja pravila margine u CSS-u je da je navedena vrijednost vertikalno za inline elemente se zanemaruje. Pitajući:

Margin:20px;

Na primjer, za , koji je umetnuti element, zapravo ćemo vidjeti samo horizontalni padding, a okomito neće doći do promjena.

Gledajući malo unaprijed, reći ću da će vertikalni padding za inline oznake funkcionirati, ali povećani unutrašnji padding neće ni na koji način utjecati na njegovu ukupnu poziciju u odnosu na druge susjedne elemente.

U slučaju oznake bloka (naslova, pasusa), povećanje vertikalnog Padding-a bi pomjerilo ovaj element u odnosu na druge susjedne blokove.

Pa, okvir (Border), odnosno njegova širina, također neće moći pomjeriti druge susjedne blokove okomito od oznake linije. Za inline elemente, kretanje je moguće samo u jednom smjeru - horizontalno i to je to.

Padding i border - unutrašnji padding i okviri

Pređimo sada na postavljanje paddinga pomoću pravila Padding i vidimo tačno koje vrijednosti može poprimiti:

Kao što vidite, ovdje se ne spominje Auto, a ovo CSS pravilo ne dozvoljava korištenje negativnih vrijednosti (mogu biti samo pozitivne - od nule i više). One. Ne postoji način da se sadržaj gurne izvan okvira koristeći Padding. Maksimalno što se može učiniti je da se sadržaj približi kadru.

Procenti u njemu se izračunavaju na isti način kao u Marginu - u odnosu na širinu kontejnera (područje sadržaja roditeljskog elementa) u koji je naš element zatvoren. Pravilo složenog dopuna u Css je formiran i poštuje iste zakone kao što je gore navedeno:

Padding:20px 10px 40px 30px;

U ovom pravilu, počevši od vrha, opisujemo sve četiri strane. Ako trebate smanjiti nešto u njemu (na tri, dvije ili čak jednu vrijednost), tada ćete morati koristiti gore opisane principe redukcije za vanjske uvlake, koje će raditi s potpuno istim uspjehom za interne.

I posljednja stvar koju bih danas želio razmotriti je okvir koji se postavlja pomoću Granica. Imaju tri vrste parametara:

1. Border-width — postavlja debljinu ivice
2. Border-color — postavlja njegovu boju
3. Border-style - vrsta okvira ili vrsta linije kojom će biti nacrtan

Sva tri ova CSS pravila imaju važeći skup vrijednosti:

Širina linije za okvir ( Border-width) može se navesti ili pomoću brojeva u Em, Ex ili Px, ili riječima:

1. Tanka - tanka linija;
2. Srednji - prosjek (ova vrijednost se koristi po defaultu);
3. Gusto - debelo.

Kao vrijednost za boju okvira ( Border-color) možete koristiti prihvaćene metode za njihovo specificiranje (heksadecimalni kod, riječi, itd.):

Boja ivice:crvena;

Podrazumevano, ako boja obruba nije eksplicitno specificirana, koristit će se ona koja se koristi za font unutar elementa.
CSS svojstvo Border-style vam omogućava da navedete tip ivice riječima:

1. Ništa - bez okvira (zadano)
2. Tačkasta - linija je nacrtana tačkama
3. Isprekidana - isprekidana linija
4. Puna - puna linija
5. Dvostruka - dupla linija
6. Utor - utisnuti okvir
7. Greben - izbočen
8. Uvod i početak - igre sjena

Naravno, budući da svaki blok ima četiri strane, možete koristiti i opća pravila i posebna pravila za svaku stranu:

Isto će važiti i za montažna Granična pravila— može se odrediti i za sve strane istovremeno (Granica), i za svaku stranu posebno (Granica-gore, lijevo, dolje i desno). Redoslijed vrijednosti nije važan:

Bord:1px puna crvena;

Ako nešto propustite, umjesto toga će se koristiti zadana vrijednost.

Sretno ti! Vidimo se uskoro na stranicama blog stranice

Možda ste zainteresovani

Visina, širina i prelivanje - CSS pravila za opisivanje područja sadržaja u blok rasporedu
Pozicija (apsolutna, relativna i fiksna) - načini pozicioniranja HTML elemenata u CSS-u (pravila lijevo, desno, gore i dolje) Različiti stilovi za interne i eksterne veze putem CSS-a
Float i clear u CSS - alatima za raspored blokova
Prikaz (blok, nijedan, inline) u CSS-u - postavite vrstu prikaza HTML elemenata na web stranici
Stil liste (tip, slika, pozicija) - Css pravila za prilagođavanje izgleda lista u HTML kodu
Pozadina u CSS-u (boja, pozicija, slika, ponavljanje, prilog) - sve za postavljanje boje pozadine ili pozadinske slike HTML elemenata
Čemu služi CSS, kako povezati kaskadne stilove sa HTML dokumentom i osnovna sintaksa ovog jezika Kako konfigurirati naizmjeničnu boju pozadine redova tabela, lista i drugih Html elemenata na web mjestu koristeći pseudo-klasu nth-child
Pravila fonta (težina, porodica, veličina, stil) i visina linije za stiliziranje fontova u CSS-u

CSS svojstvo paddinga je odgovorno za postavljanje dopuna unutar elementa od njegove granice

CSS sintaksa dopuna

padding: gore desno dolje lijevo;

• top - uvlačenje od gornje granice elementa;
• desno - uvlačenje od desne granice elementa;
• bottom - uvlačenje od donje granice elementa;
• lijevo - uvlačenje od lijeve ivice elementa;

Vrijednosti su najčešće navedene u pikselima. Također možete odrediti procente i druge važeće CSS jedinice.

Napomena 1
Možete navesti više od četiri vrijednosti. Ovisno o broju vrijednosti, radnje će biti različite:

• Ako su navedene 3 vrijednosti, tada prva vrijednost postavlja uvlačenje na vrhu, druga - istovremeno lijevo i desno, a treća - na dnu
• Ako su navedene 2 vrijednosti, tada prva vrijednost postavlja padding iznad i ispod, druga - lijevo i desno od sadržaja
• Ako je vrijednost postavljena na 1, tada je uvlačenje postavljeno na isto uvlačenje za sve strane. Na primjer:

padding: 10px 10px 10px 10px; Možete ga navesti kompaktnije: padding: 10px;

Napomena 2
Za razliku od svojstva CSS margine, negativne vrijednosti dopuna nisu dozvoljene.

Padding takođe ima 4 odvojena CSS svojstva. Svaki od njih je odgovoran za neki pravac.

• padding-left - padding od lijevog ruba elementa;
• padding-right - padding od desne ivice elementa;
• padding-top - padding od gornje granice elementa;
• padding-bottom - padding od lijevog ruba elementa;

Na primjer

padding: 3px 5px 7px 10px; Ili možete detaljnije pitati: padding-left : 10px ; padding-right : 5px ; padding-top: 3px; padding-bottom : 7px ;

Primjeri s različitim uvlakama unutar elementa

Primjer 1: Uvlačenje teksta unutar oznake

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Вот как это выглядит на странице:

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Пример 2. Отступ объекта внутри объекта

Описание

Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон.

Синтаксис

padding: [значение | проценты] {1, 4} | inherit

Значения

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.

Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. При указании поля в процентах, значение считается от ширины родителя элемента.

HTML5 CSS2.1 IE Cr Op Sa Fx

Rezultat ovog primjera prikazan je na sl. 2.

Rice. 2. Primjena svojstva paddinga

Objektni model

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

Pregledači

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

Ovo svojstvo može imati od jedne do četiri vrijednosti.

Na slici je područje za koje je odgovorno svojstvo paddinga označeno svijetlo sivom:

1. Kada je navedeno četiri vrijednosti(5px 10px 15px 20px) - redoslijed unutrašnjeg paddinga će biti sljedeći: Top(5px ) - U redu(10px ) - Dno(15px ) - lijevo(20px). Da biste zapamtili redoslijed uvlačenja u jednom oglasu, možete koristiti englesku riječ TR ou B.L. e (gdje T- vrh, R- u redu, B- dno, L- lijevo).


2. Kada je navedeno tri značenja(5px 10px 15px) - redoslijed unutrašnjeg dopuna bit će sljedeći: Top(5px ) - Desno lijevo(10px ) - Dno(15px).


3. Kada je navedeno dva značenja(5px 10px) - prva vrijednost (5px) će postaviti veličinu dopuna od vrha i dna sadržaja elementa, druga (10px) vrijednost će postaviti padding lijevo i desno od sadržaja elementa.


4. Kada je navedeno istu vrijednost(5px) - unutrašnja margina na svim stranama će biti iste veličine - 5px.

Podrška za pretraživač

CSS sintaksa:

JavaScript sintaksa:

Object.style.padding = "5px"

Vrijednosti svojstava

CSS verzija

Naslijeđeno

Animable

Primjer upotrebe

Postavlja vrijednost margina oko sadržaja elementa. Margina je udaljenost od unutrašnje ivice okvira elementa do imaginarnog pravokutnika koji ograničava njegov sadržaj (slika 1).

Rice. 1. Margina lijevo od teksta

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

kratke informacije

Sintaksa

padding: [<размер> | <проценты>] {1, 4}