Diferenca e marzhit të mbushjes Css. Marzhë apo mbushje? Duke menduar se çfarë dhe ku të përdorni

Përshëndetje të dashur lexues të faqes së blogut. Sot dua të vazhdoj temën e studimit dhe të marr parasysh ato rregulla stili që ju lejojnë të vendosni mbushjen dhe kufijtë për elementët Html: kufiri, diferenca dhe mbushja.

Para kësaj, ne arritëm të studiojmë vetitë mjaft të thjeshta që kontrollonin fontet (), tekstin () dhe morëm parasysh modelin

Po, ne gjithashtu arritëm të merrnim parasysh parimet e përdorimit në të gjitha detajet (të shtrira në disa artikuj). Tani është koha të kalojmë te rregullat që përbëjnë bazën për ndërtimin e dokumenteve (faqeve të internetit) dhe do të fillojmë me modelin e bllokut (marrëdhëniet e elementeve HTML).

Në terma të përgjithshëm, unë kam shkruar tashmë për modernen, mirë, por sot do të ketë specifika të pastra. Nëse dëshironi të lexoni publikimet e mëparshme mbi këtë temë, atëherë jeni të mirëpritur.

Modeli i kutisë CSS - mbushja, diferenca dhe kufiri

Së treti, interesi mund të përdoret. Nga se numërohen? Rezulton se nga gjerësia e enës(d.m.th., nga zona e përmbajtjes së elementit mëmë). Për më tepër, kjo vlen jo vetëm për margjinën-djathtas dhe majtas, gjë që do të ishte logjike, por për marzhin-lart dhe fund përqindjet do të llogariten saktësisht nga gjerësia (jo lartësia) e kontejnerit.

Duhet të theksohet, duke folur për vendosjen e vlerave dimensionale, se Marzhi mund të jetë edhe negative... ato. kur specifikojmë një vlerë pozitive për mbushjen e jashtme, ne e zhvendosim elementin ngjitur me distancën e specifikuar dhe nëse specifikohet një vlerë negative, blloku ngjitur thjesht do të shkojë tek ai për të cilin kemi vendosur këtë mbushje negative. Dhe kjo përdoret shumë shpesh në CSS.

Epo, është e vetëkuptueshme që ekziston një rregull i përbërë CSS Margin, i cili në shumë raste ju lejon të zvogëloni madhësinë e kodit të përdorur për të vendosur kufijtë e kërkuar. Rendi i vlerave në të është i rregulluar rreptësisht (ato shkruhen përmes një karakteri hapësinor) dhe duhet të korrespondojnë me modelin:

ato. numërimi fillon në krye dhe vazhdon në drejtim të akrepave të orës deri në fund të rrethit. Mund të duket diçka si kjo:

Margjina: 20px 10px 40px 30px;

Dhe kjo do të thotë që shfletuesi duhet të futë 20 piksele në krye të bllokut tonë, 10 pikselë në të djathtë, 40 pikselë nga poshtë dhe 30 pikselë në të majtë. kjo hyrje do të jetë e barabartë me këtë:

Reduktimi i kodit CSS është i dukshëm me sy të lirë. Por ky nuk është kufiri. Është krejtësisht e pranueshme të përdoret jo vetëm katër, por edhe tre, dy dhe madje vetëm një vlerë në një rregull të përbërë. E cila do të ndihmojë më tej në zvogëlimin e madhësisë së kodit. Sidoqoftë, do të jetë e mundur të zvogëlohet numri i vlerave vetëm në raste të caktuara:

1. Nëse kufijtë majtas dhe djathtas janë të njëjta, për shembull, si kjo: margjina: 20px 30px 40px 30px;

   Kjo e fundit mund të hiqet:

   Margjina: 20px 30px 40px;

   Këto dy hyrje të rregullave kolektive bëjnë të njëjtën gjë. Prandaj, nëse shihni një rekord me tre vlera në Marzh, atëherë vlera e të katërtit (në të djathtë) mund të shihet në të dytën (në të majtë).

   Në rastin e marzheve të barabarta sipër dhe poshtë, ky truk nuk do të funksionojë më, sepse logjikisht është e mundur të zvogëlohet struktura e rekordit të rregullit kolektiv, vetëm duke prerë vlerat e dyfishta nga fundi i saj(dhe vlera e marzhit të poshtëm do të jetë e parafundit).

2. Nëse, përveç barazisë së kufijve të jashtëm majtas dhe djathtas, ka një barazi të vlerave të tyre në krye dhe në fund: marzhi: 20px 30px 20px 30px;

   ose, e cila është e njëjtë (në bazë të paragrafit 1):

   Margjina: 20px 30px 20px;

   Një rregull i tillë kolektiv mund të shkruhet vetëm me dy vlera, duke hedhur poshtë të fundit, që përkon me të parën:

   Margjina: 20px 30px; Në këtë rast, vlera e parë përshkruan kufijtë vertikalë, ndërsa e dyta përshkruan kufijtë horizontale.

3. Dhe së fundi, nëse të gjitha vlerat në rregullin e parafabrikimit janë të njëjta: diferenca: 20px 20px 20px 20px;

   ose, e cila është e njëjtë (në bazë të pikës 2):

   Marzhi: 20px 20px;

   Pastaj mund të përdorni lloji i rekordit të shkurtuar maksimalisht(duke hedhur poshtë vlerën e fundit që përputhet me të parën):

   Margjina: 20 px; Që do të thotë të njëjtën diferencë në të gjitha anët e elementit tonë Html.

Duke folur për marzhet, vlen të përmendet një skemë si p.sh "Margjina-kolaps" ose, me fjalë të tjera, "kolapsi i marzheve". Me pak fjalë, thelbi i këtij fenomeni është si më poshtë.

Nëse kemi dy blloqe të vendosura njëri nën tjetrin (kolapset e marzhit mund të ndodhin vetëm vertikalisht) dhe të dy kanë kufij të kundërt (për shembull, fundi për elementin e sipërm dhe marzhi i sipërm për pjesën e poshtme), atëherë një vlerë më e madhe e Marzhit do të thith një më të vogël.

Për shembull, nëse blloku i sipërm është caktuar si vijon:

Margjina: 20px 20px 200px 20px;

Dhe për pjesën e poshtme:

Margjina: 100px 20px 20px 20px;

Pastaj kufiri i poshtëm i bllokut të sipërm (200 px) do të thithë margjinën e sipërme të bllokut të poshtëm (100 px, dhe edhe nëse bëhet 199 px, asgjë nuk do të ndryshojë) dhe diferenca e jashtme që rezulton midis këtyre dy blloqeve do të jetë ende 200 px. ato. vetëm më i madhi modul Margin, dhe nuk shtohet në asnjë mënyrë me vlerën e kundërt të elementit vertikalisht ngjitur.

E tillë është ngjitja, e cila funksionon ekskluzivisht vertikalisht, dhe horizontalisht madhësitë e kundërta të Marzhit thjesht do t'i shtohen njëra-tjetrës. Por kjo ka të bëjë vetëm me kufijtë me të njëjtën shenjë, por nëse ato janë me shenja të ndryshme, atëherë numrat e tyre thjesht do të mblidhen dhe blloqet do të ndahen nga njëri-tjetri sipas vlerës që rezulton.

Për shembull, në këtë rast:

Margjina e sipërme: 20px 20px -20px 20px; Margjina e poshtme: 10px 20px 20px 20px;

Mbushja që rezulton midis blloqeve do të jetë -10 px, d.m.th. pjesa e poshtme do të kalojë mbi elementin e sipërm Html me 10 px.

Një veçori tjetër e përdorimit të rregullit të Marzhit në CSS është se vlera e përshkruar vertikale për elementet inline injorohet... Duke pyetur:

Margjina: 20 px;

Për shembull, for, i cili është një element inline, ne në fakt do të shohim vetëm mbushje horizontale dhe asnjë ndryshim nuk do të ndodhë vertikalisht.

Duke vrapuar pak përpara, do të them që Padding do të funksionojë për etiketat inline vertikalisht, por mbushja e rritur nuk do të ndikojë në asnjë mënyrë pozicionin e tij të përgjithshëm në lidhje me elementët e tjerë ngjitur.

Në rastin e një etikete blloku (titujt, paragrafët), Rritja vertikalisht e Mbushjes do ta lëvizte atë element në lidhje me blloqet e tjera ngjitur.

Epo, kufiri (Border), ose më mirë gjerësia e tij, gjithashtu nuk do të jetë në gjendje të lëvizë blloqet e tjera ngjitur vertikalisht larg etiketës së linjës. Për elementët e linjës, lëvizja është e mundur vetëm në një drejtim - horizontalisht dhe kaq.

Mbushje dhe kufi - mbushje dhe kufij

Le të kalojmë tani në vendosjen e mbushjes duke përdorur rregullin e mbushjes dhe të shohim saktësisht se çfarë vlerash mund të marrë:

Siç mund ta shihni, këtu nuk përmendet Auto, dhe gjithashtu ky rregull CSS nuk lejon vlera negative (ato mund të jenë vetëm pozitive - nga zero e lart). ato. Mbushja nuk do ta shtyjë përmbajtjen jashtë kornizës. Më së shumti që mund të bëhet është afrimi i përmbajtjes me kornizën.

Përqindjet në të llogariten në të njëjtën mënyrë si në Marzh - në lidhje me gjerësinë e kontejnerit (zona e përmbajtjes së elementit mëmë), e cila mbyll elementin tonë. Rregulla e kombinuar e mbushjes në Cssështë formuar dhe i bindet të njëjtave ligje siç u diskutua më lart:

Mbushje: 20px 10px 40px 30px;

Në këtë rregull, ne përshkruajmë të katër anët, duke filluar nga lart. Nëse keni nevojë të zvogëloni diçka në të (në tre, dy ose edhe një vlerë), atëherë do t'ju duhet të përdorni parimet e reduktimit të përshkruara më lart për dhëmbëzimet e jashtme, të cilat do të funksionojnë me të njëjtin sukses për dhëmbëzat e brendshme.

Dhe gjëja e fundit që do të doja të merrja në konsideratë sot është kuadri që është vendosur duke përdorur Kufiri... Ata kanë tre lloje parametrash:

1. Border-width - vendos gjerësinë e kufirit
2. Border-color - vendos ngjyrën e saj
3. Border-style - lloji i kufirit ose lloji i vijës me të cilën do të vizatohet

Të tre këto rregulla CSS kanë një grup të vlefshëm vlerash:

Gjerësia e linjës për kornizën ( gjerësia e kufirit) mund të specifikohet duke përdorur numrat në Em, Ex ose Px, ose me fjalë:

1. Vijë e hollë - e hollë;
2. E mesme - e mesme (kjo vlerë përdoret si parazgjedhje);
3. I trashë - i trashë.

Si një vlerë për ngjyrën e kufirit ( Kufi-ngjyra), mund të përdorni metodat e pranuara për specifikimin e tyre (kodi heksadecimal, fjalët, etj.):

Ngjyra e kufirit: e kuqe;

Si parazgjedhje, nëse ngjyra e kufirit nuk është specifikuar në mënyrë eksplicite, atëherë do të përdoret ajo e përdorur për fontin brenda këtij elementi.
Vetia CSS Border-style ju lejon të specifikoni llojin e kufirit me fjalë:

1. Asnjë - pa kufi (i parazgjedhur)
2. Pika - vija vizatohet me pika
3. Vijë e ndërprerë - me pika
4. Linjë e fortë - e fortë
5. Linja e dyfishtë - dyshe
6. Groove - kufi i dhëmbëzuar
7. Kurriz - i dalë
8. Hyrja dhe fillimi - duke luajtur me hijen

Natyrisht, meqenëse ka katër anët e çdo blloku, atëherë mund të përdorni të dy rregullat e përgjithshme dhe ato të veçanta për secilën nga anët:

E njëjta gjë do të zbatohet për parafab Rregulla kufitare- mund të shkruhet si për të gjitha anët në të njëjtën kohë (Border), ashtu edhe për secilën nga anët veç e veç (Border-lart, majtas, poshtë dhe djathtas). Rendi i vlerave nuk është i rëndësishëm:

Kufiri: 1px e kuqe e fortë;

Nëse diçka mungon, në vend të kësaj do të përdoret vlera e paracaktuar.

Paç fat! Shihemi së shpejti në faqet e faqes së blogut

Ju mund të jeni të interesuar

Lartësia, gjerësia dhe tejmbushja - Rregullat CSS për përshkrimin e një zone të përmbajtjes në një plan urbanistik
Pozicioni (absolut, relativ dhe fiks) - mënyrat e pozicionimit të elementeve HTML në CSS (rregullat majtas, djathtas, lart dhe poshtë) Stilime të ndryshme për lidhje të brendshme dhe të jashtme nëpërmjet CSS
Fluturoni dhe pastroni në CSS - mjetet e paraqitjes së bllokut
Shfaq (bllok, asnjë, inline) në CSS - caktoni llojin e shfaqjes së elementeve Html në faqen e internetit
Stili i listës (lloji, imazhi, pozicioni) - Rregullat Css për personalizimin e paraqitjes së listave në kodin Html
Sfondi në CSS (ngjyra, pozicioni, imazhi, përsëritja, bashkëngjitja) - të gjitha për vendosjen e ngjyrës së sfondit ose imazhit të sfondit të elementeve HTML
Për çfarë është CSS, si të lidhni fletët e stilit kaskadë me një dokument Html dhe bazat e sintaksës së kësaj gjuhe Si të vendosni ngjyrën e sfondit të alternuar të rreshtave të tabelave, listave dhe elementëve të tjerë HTML në një sajt duke përdorur pseudo-klasën e fëmijës së ntë
Rregullat e fontit (pesha, familja, madhësia, stili) dhe lartësia e rreshtit për stilimin e shkronjave në CSS

Vetia e mbushjes CSS është përgjegjëse për vendosjen e mbushjes brenda elementit nga kufiri i tij

Sintaksa e mbushjes CSS

mbushje: lart djathtas poshtë majtas;

• sipër - zhvendosja nga kufiri i sipërm i elementit;
• djathtas - zhvendosja nga kufiri i djathtë i elementit;
• fundi - zhvendosja nga kufiri i poshtëm i elementit;
• majtas - zhvendosur nga kufiri i majtë i elementit;

Vlerat më së shpeshti jepen në piksel. Përqindja dhe njësitë e tjera të vlefshme CSS lejohen gjithashtu.

Shënim 1
Nuk lejohen katër vlera. Në varësi të numrit të vlerave, veprimet do të jenë të ndryshme:

• Nëse jepen 3 vlera, atëherë vlera e parë vendos mbushjen në krye, e dyta majtas dhe djathtas në të njëjtën kohë dhe e treta në fund.
• Nëse jepen 2 vlera, atëherë vlera e parë vendos hyrjen e sipërme dhe të poshtme, e dyta - majtas dhe djathtas të përmbajtjes.
• Nëse vendoset në 1 vlerë, atëherë dhëmbëzimi vendoset në të njëjtën indent për të gjitha anët. Për shembull:

mbushje: 10px 10px 10px 10px; Mund ta vendosni në mënyrë më kompakte: mbushje: 10 px;

Shënim 2
Ndryshe nga vetia e marzhit CSS, vlerat negative të mbushjes nuk lejohen.

Gjithashtu mbushja ka 4 veti të veçanta CSS. Secili prej tyre është përgjegjës për një drejtim.

• padding-left - mbushje nga kufiri i majtë i elementit;
• padding-right - mbushje nga kufiri i djathtë i elementit;
• padding-top - mbushje nga kufiri i sipërm i elementit;
• padding-bottom - mbushje nga kufiri i majtë i elementit;

për shembull

mbushje: 3px 5px 7px 10px; Ose mund të pyesni në detaje: mbushje-majtas: 10px; mbushje-djathtas: 5px; padding-top: 3px; mbushje-fund: 7px;

Shembuj me dhëmbëza të ndryshme brenda një elementi

Shembull 1. Dhënia e tekstit brenda një etikete

Пример с нулевыми отступам (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

Rezultati i këtij shembulli është paraqitur në Fig. 2.

Oriz. 2. Zbatimi i vetive të mbushjes

Modeli i objektit

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

Shfletuesit

Internet Explorer deri dhe duke përfshirë versionin 7.0 nuk e mbështet vlerën trashëgimore.

Kjo pronë mund të ketë një deri në katër vlera.

Në imazh, një ngjyrë gri e lehtë tregon zonën për të cilën është përgjegjëse vetia e mbushjes:

1. Kur specifikon katër vlera(5px 10px 15px 20px) - rendi i mbushjes do të jetë si më poshtë: Top(5 px) - E drejta(10 px) - Poshtë(15 px) - Majtas(20 px). Ju mund të përdorni një fjalë angleze për të mësuar përmendësh rendin e vendosjes së dhëmbëzimeve të brendshme në një deklaratë. TR ou BL e (ku T- lartë, R- drejtë, B- fundi, L- majtas).


2. Kur specifikon tre vlera(5px 10px 15px) - rendi i mbushjes do të jetë si më poshtë: Top(5 px) - Djathtas majtas(10 px) - Poshtë(15 px).


3. Kur specifikon dy vlera(5px 10px) - vlera e parë (5px) do të vendosë sasinë e mbushjes nga lart dhe fundi i përmbajtjes së elementit, vlera e dytë (10px) do të vendosë mbushjen majtas dhe djathtas të përmbajtjes së elementit.


4. Kur specifikon një kuptim(5px) - mbushja në të gjitha anët do të jetë me të njëjtën madhësi - 5px.

Mbështetja e shfletuesit

Sintaksa CSS:

Sintaksa JavaScript:

Object.style.padding = "5px"

Vlerat e pasurisë

Versioni CSS

I trasheguar

I animuar

Shembull përdorimi

Vendos vlerën e margjinave rreth përmbajtjes së elementit. Një diferencë është distanca nga skaji i brendshëm i kornizës së një elementi në një drejtkëndësh imagjinar që kufizon përmbajtjen e tij (Figura 1).

Oriz. 1. Fusha në të majtë të tekstit

Vetia e mbushjes ju lejon të vendosni vlerën e marzhit për të gjitha anët e një elementi menjëherë, ose të përcaktoni kufijtë vetëm për anët e specifikuara.

informacion të shkurtër

Sintaksë

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