Css razlika u marginama ispucavanja. Margina ili dopuna? Razmišljanje o tome što i gdje koristiti

Pozdrav dragi čitatelji blog stranice. Danas želim nastaviti temu proučavanja i razmotriti ona pravila stila koja vam omogućuju postavljanje paddinga i obruba za HTML elemente: obruba, margina i padding.

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

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

Općenito, o modernom sam već pisao, dobro, ali danas će biti čiste specifičnosti. Ako želite pročitati prethodne publikacije na tu temu, dobrodošli ste.

Model CSS okvira - padding, margina i obrub

Treće, kamata se može iskoristiti. Od čega se broje? Ispostavilo se da od širine posude(odnosno iz područja sadržaja roditeljskog elementa). Štoviše, ovo se ne odnosi samo na margine-desno i lijevo, što bi bilo logično, već će se postoci margin-top i dno izračunavati točno iz širine (ne visine) spremnika.

Treba napomenuti, govoreći o postavljanju dimenzionalnih vrijednosti, da Margin može biti i negativan... Oni. kada specificiramo pozitivnu vrijednost za vanjski padding, pomičemo susjedni element za zadanu udaljenost, a ako je navedena negativna vrijednost, susjedni blok će jednostavno ići na onaj za koji smo postavili ovaj negativni padding. I to se vrlo često koristi u CSS-u.

Pa, podrazumijeva se da postoji složeno CSS pravilo margine, koje vam u mnogim slučajevima omogućuje smanjenje veličine koda koji se koristi za postavljanje potrebnih margina. Redoslijed vrijednosti u njemu je strogo reguliran (napisane su kroz razmak) i moraju odgovarati obrascu:

Oni. nabrajanje počinje na vrhu i nastavlja se u smjeru kazaljke na satu sve do kraja kruga. Moglo bi izgledati otprilike ovako:

Margina: 20px 10px 40px 30px;

A to će značiti da preglednik mora uvući 20 piksela na vrh našeg bloka, 10 piksela udesno, 40 piksela od dna i 30 piksela lijevo. ovaj će unos biti ekvivalentan ovome:

Smanjenje CSS koda vidljivo je golim okom. Ali to nije granica. Sasvim je prihvatljivo koristiti ne samo četiri, već i tri, dvije, pa čak i samo jednu vrijednost u složenom 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;

   Potonje se može izostaviti:

   Margina: 20px 30px 40px;

   Ova dva unosa skupnih pravila čine istu stvar. Stoga, ako vidite zapis s tri vrijednosti u margini, tada se vrijednost četvrte (desno) može vidjeti u drugoj (slijeva).

   U slučaju jednakih margina iznad i ispod, ovaj trik više neće raditi, jer je logično moguće smanjiti strukturu zapisa kolektivnog pravila, samo odsijecanje dupliciranih vrijednosti s njegovog kraja(a vrijednost donje margine bit će pretposljednja).

2. Ako, osim 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 (na temelju klauzule 1):

   Margina: 20px 30px 20px;

   Takvo kolektivno pravilo može se napisati sa samo dvije vrijednosti, odbacujući posljednju, koja se podudara s prvom:

   Margina: 20px 30px; U ovom slučaju, prva vrijednost opisuje okomite margine, dok druga opisuje horizontalne margine.

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

   ili, što je isto (na temelju klauzule 2):

   Margina: 20px 20px;

   Tada možete koristiti maksimalno skraćena vrsta zapisa(odbacivanjem zadnje vrijednosti koja odgovara prvoj):

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

Govoreći o marži, vrijedi spomenuti shemu kao što je "Margina-kolaps" ili, drugim riječima, “urušavanje margina”. Ukratko, bit ovog fenomena je sljedeća.

Ako imamo dva bloka smještena jedan ispod drugog (kolapsi margine mogu se dogoditi samo okomito) i oba imaju suprotne margine (na primjer, dno za gornji element i gornju marginu za donji), tada će veća vrijednost margine apsorbirati manji.

Na primjer, ako je gornji blok postavljen na sljedeće:

Margina: 20px 20px 200px 20px;

I za donji:

Margina: 100px 20px 20px 20px;

Tada će donja margina gornjeg bloka (200px) apsorbirati gornju marginu donjeg (100px, a čak i ako postane 199px, ništa se neće promijeniti), a rezultirajuća vanjska margina između ova dva bloka i dalje će biti 200px. Oni. samo veći modulo Margin, te se ni na koji način ne zbraja s suprotnom vrijednošću okomito susjednog elementa.

Takva je kuka koja radi isključivo okomito, a horizontalno suprotne veličine marže jednostavno će se međusobno zbrajati. Ali to 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 razmaknuti jedan od drugog za rezultirajuću vrijednost.

Na primjer, u ovom slučaju:

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

Rezultirajući padding između blokova bit će -10px, tj. donji će prelaziti preko gornjeg Html elementa za 10px.

Još jedna značajka korištenja pravila margine u CSS-u je propisana vrijednost vertikalno za inline elemente se zanemaruje... Pitajući:

Margina: 20px;

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

Idući malo ispred sebe, reći ću da će Padding raditi za inline oznake okomito, ali povećani padding ni na koji način neće utjecati na njegov opći položaj u odnosu na druge susjedne elemente.

U slučaju oznake bloka (naslovi, odlomci), okomito povećanje Padding bi pomaknulo taj element u odnosu na druge susjedne blokove.

Pa, obrub (Border), odnosno njegova širina, također neće moći pomaknuti druge susjedne blokove okomito od inline oznake. Za linijske elemente kretanje je moguće samo u jednom smjeru – vodoravno i to je to.

Padding and border - padding i rubovi

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

Kao što vidite, ovdje se ne spominje Auto, a ovo CSS pravilo ne dopušta negativne vrijednosti (mogu biti samo pozitivne - od nule naviše). Oni. Padding neće istisnuti sadržaj iz okvira. Najviše što se može učiniti je približiti sadržaj kadru.

Postoci se u njemu izračunavaju na isti način kao u Marginu - u odnosu na širinu spremnika (područje sadržaja roditeljskog elementa), koji obuhvata naš element. Pravilo kombiniranog dopuna u Css je formiran i podliježe istim zakonima kao što je spomenuto gore:

Padding: 20px 10px 40px 30px;

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

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

1. Border-width - postavlja širinu obruba
2. Border-color - postavlja svoju boju
3. Border-style - vrsta obruba ili vrsta linije kojom će biti nacrtana

Sva tri ova CSS pravila imaju valjani skup vrijednosti:

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

1. Tanka - tanka linija;
2. Medium - srednji (ova vrijednost se koristi prema zadanim postavkama);
3. Gusto - debelo.

Kao vrijednost za boju obruba ( Boja obruba), možete koristiti prihvaćene metode za njihovo određivanje (heksadecimalni kod, riječi itd.):

Boja obruba: crvena;

Prema zadanim postavkama, ako boja obruba nije eksplicitno navedena, tada će se koristiti ona koja se koristi za font unutar ovog elementa.
CSS svojstvo Border-style omogućuje vam da odredite vrstu obruba riječima:

1. Ništa - bez obruba (zadano)
2. Točkasto - linija je nacrtana točkama
3. Isprekidana - isprekidana linija
4. Puna - puna linija
5. Dvostruka - dvostruka linija
6. Utor - uvučeni rub
7. Greben - izbočen
8. Unutar i početak - igra se sjenom

Naravno, budući da postoje četiri strane bilo kojeg bloka, tada možete koristiti i opća pravila i zasebna pravila za svaku od strana:

Isto će vrijediti i za prefab Granično pravilo- može se napisati i za sve strane u isto vrijeme (Bord), i za svaku od strana posebno (Granica-gore, lijevo, dolje i desno). Redoslijed vrijednosti nije važan:

Obrub: 1px puna crvena;

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

Sretno ti! Vidimo se uskoro na stranicama blog stranice

Možda ćete biti zainteresirani

Visina, širina i preljev - 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 vanjske 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 (vrsta, slika, pozicija) - Css pravila za prilagođavanje izgleda popisa u HTML kodu
Pozadina u CSS-u (boja, pozicija, slika, ponavljanje, privitak) - sve za postavljanje boje pozadine ili pozadinske slike HTML elemenata
Čemu služi CSS, kako povezati kaskadne tablice stilova s ​​HTML dokumentom i osnove sintakse ovog jezika Kako postaviti naizmjeničnu boju pozadine redaka tablica, popisa i drugih Html elemenata na web-mjestu koristeći pseudoklasu nth-child
Pravila fonta (težina, obitelj, veličina, stil) i visina reda za oblikovanje fontova u CSS-u

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

CSS sintaksa dopuna

padding: gore desno dolje lijevo;

• vrh - pomak od gornje granice elementa;
• desno - pomak od desne granice elementa;
• dno - pomak od donje granice elementa;
• lijevo - pomak od lijeve granice elementa;

Vrijednosti se najčešće daju u pikselima. Postotak i druge važeće CSS jedinice također su dopuštene.

Napomena 1
Nisu dopuštene četiri vrijednosti. Ovisno o broju vrijednosti, radnje će biti različite:

• Ako su dane 3 vrijednosti, tada prva vrijednost postavlja padding na vrh, druga na lijevo i desno u isto vrijeme, a treća na dno.
• Ako su date 2 vrijednosti, tada prva vrijednost postavlja gornju i donju uvlaku, druga - lijevo i desno od sadržaja
• Ako je postavljeno na vrijednost 1, tada je uvlaka postavljena na istu uvlaku za sve strane. Na primjer:

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

Napomena 2
Za razliku od svojstva CSS margine, negativne vrijednosti dopuna nisu dopuštene.

Također padding ima 4 odvojena CSS svojstva. Svaki od njih je odgovoran za neki smjer.

• padding-left - padding od lijevog ruba elementa;
• padding-right - padding od desnog ruba 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-desno: 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.

Riža. 2. Primjena svojstva paddinga

Model objekta

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

Preglednici

Internet Explorer do i uključujući verziju 7.0 ne podržava naslijeđenu vrijednost.

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

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

1. Prilikom navođenja četiri vrijednosti(5px 10px 15px 20px) - redoslijed dopuna bit će sljedeći: Vrh(5px) - Pravo(10px) - Dno(15px) - Lijevo(20 piksela). Možete koristiti englesku riječ da zapamtite redoslijed postavljanja internih uvlaka u jednoj deklaraciji. TR ou BL e (gdje T- vrh, R- u redu, B- dno, L- lijevo).


2. Prilikom navođenja tri vrijednosti(5px 10px 15px) - redoslijed dopuna bit će sljedeći: Vrh(5px) - Desno lijevo(10px) - Dno(15 piksela).


3. Prilikom navođenja dvije vrijednosti(5px 10px) - prva vrijednost (5px) će postaviti količinu odstupanja od vrha i dna sadržaja elementa, druga (10px) vrijednost će postaviti dopunu lijevo i desno od sadržaja elementa.


4. Prilikom navođenja jedno značenje(5px) - padding sa svih strana bit će iste veličine - 5px.

Podrška za preglednik

CSS sintaksa:

JavaScript sintaksa:

Object.style.padding = "5px"

Vrijednosti svojstva

CSS verzija

Naslijeđeno

Animirani

Primjer upotrebe

Postavlja vrijednost margina oko sadržaja elementa. Margina je udaljenost od unutarnjeg ruba okvira elementa do zamišljenog pravokutnika koji ograničava njegov sadržaj (slika 1).

Riža. 1. Polje lijevo od teksta

Svojstvo padding omogućuje vam da postavite vrijednost margine za sve strane elementa odjednom ili da definirate margine samo za navedene strane.

kratke informacije

Sintaksa

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