Mbushja e skajeve css. Indencat dhe Margjinat

Layout CSS ka qenë gjithmonë drejtkëndëshe. Çdo vijë e qetë janë kompetencë e zhvilluesit. Rregullat e stilit ofrojnë mundësi të mjaftueshme për t'i dhënë faqes një formë të qetë brenda kufijve të rezolucionit të ekranit. Por çdo element i paraqitjes është gjithmonë një drejtkëndësh në të cilin rregullimi i informacionit rregullohet nga rregullat CSS.

Mbushja nga të gjitha anët është e rëndësishme për çdo element faqeje kur është absolutisht i pozicionuar, dhe mbushja e sipërme CSS është e përcaktuar në mënyrë specifike sepse ka rëndësi për elemente të ndryshme, veçanërisht ato të vogla.

Rregullat bazë të pozicionimit

Një element blloku ka një rregull kufiri, një rregull mbushjeje për elementët brenda tij dhe një gjerësi kufiri që mund të përdoret gjithashtu.

Rëndësi e veçantë ka dhëmbëzimi në krye. CSS brenda një blloku lidh rregullat e mbushjes me rregullat për elementë të pozicionuar absolutisht dhe relativisht brenda atij blloku.

Një praktikë e zakonshme për rregullat CSS: mund të specifikoni të njëjtën mbushje në të gjitha anët, në çifte lart/poshtë dhe djathtas/majtas, ose për secilën anë veç e veç. Për shembull,

• diferenca: 10 px;
• mbushje: 10px20px;
• mbushje: 10px20px30px40px.

Në rastin e parë, vendoset dhëmbëzimi i elementit nga anët e enës së jashtme në të cilën ndodhet. Në rastin e dytë, kufijtë në krye dhe në fund janë 10 px, në të majtë dhe të djathtë - 20 px. Në rastin e tretë, madhësia e gërvishtjeve tregohet në të gjitha anët: lart, djathtas, poshtë dhe majtas.

Në të gjitha këto raste, dhëmbëzimi CSS e sipërme është 10 px.

Rregulla që ndryshojnë pozicionin e elementeve

Nëse një element i paraqitjes nuk është i pozicionuar absolutisht, ai pozicionohet në procedurë e përgjithshme formimi i faqes.

Nëse përcaktojmë Mbushja në CSS në krye në elementin scCurrInfo, qëllimi do të arrihet, por nëse në nivelin li nuk do të arrihet.

NË në këtë shembull duke përdorur rregullin e mbushjes: 40 px; kërkon një reduktim adekuat të rregullave të gjerësisë dhe lartësisë me 80 px. Përndryshe, madhësia e bllokut scCurrInfo do të tejkalojë kufijtë e bllokut të jashtëm.

Nëse heqim rregullin e mbushjes nga përshkrimi scCurrInfo, por e shtojmë atë me një vlerë prej 20 px në përshkrimin e stilit të artikullit të listës, do të marrim vetëm dhëmbëzimi i sipërm. CSS nuk do ta zbatojë këtë vlerë për palët e tjera.

Natyrisht, ky përdorim i rregullit të dhëmbëzimit zbatohet për çdo element li.

Praktika të përgjithshme të formatimit të përmbajtjes

Disa zhvillues arrijnë përsosmërinë duke shtruar faqe elementet e bllokut. Me sa duket është një praktikë klasike të filloni me tabela dhe të përfundoni me tuajën procesi arsimor në blloqe.

Liria e natyrshme në paraqitjen e bllokut është magjepsëse dhe imagjinata e zhvilluesit mund të mos kufizohet nga rregulla strikte të tabelës: vetëm rreshta, vetëm qeliza, të bashkuara vetëm horizontalisht dhe vertikalisht. Asgjë e veçantë për idetë relacionale.

Ndërkohë tabelat, përveç disavantazheve të dukshme, kanë edhe shumë përparësi cilësore. Kur krijon mbushje në krye, CSS merr parasysh mbushjen në të majtë, djathtas (poshtë është një moment i veçantë). Rregullat e qelizave të tabelës ju lejojnë të kontrolloni shtrirjen vertikale dhe horizontale. Duke përdorur stilet e rreshtave dhe duke i kombinuar ato me stilet e qelizave, mund të krijoni pamje komplekse të përmbajtjes.

Paraqitja e zakonshme e një faqeje në formën e drejtkëndëshave nuk e pengon aspak atë të paraqitet në formën e një tabele. Këto janë gjithashtu drejtkëndësha, por ato janë gjithashtu qeliza tabele, domethënë kanë rregullat e tyre që plotësojnë rregullat e blloqeve.

Pozicionimi absolut

Blloko me rregullën POZICIONI: absolute ; do të vendoset në një vend të përcaktuar nga koordinatat e tij në lidhje me bllokun në të cilin ndodhet.

Një tipar karakteristik i rregullave CSS është "praktika - kriteri më i mirë e vërteta" në shumicën e rasteve, veçanërisht kur kërkohet përputhshmëria e ndër-shfletuesve dhe paraqitja bëhet me dorë, preferohet të studiohen manuale të plota në fletët e stilit kaskadë.

Përdorimi i tabelave shpesh rezulton në çështje të zhvendosjes së përmbajtjes së qelizave. Një zhvendosje e ngjashme brenda një blloku nuk prek gjithmonë të gjithë elementët. Duke eksperimentuar, mund të arrini rezultatin e dëshiruar. Një detyrë e parëndësishme: si heqja e mbushjes së sipërme nuk është gjithmonë një zgjidhje e parëndësishme për CSS.

Në disa raste, kur ju duhet të vendosni elementet e faqes në thellësi të disave sistem popullor menaxhimi i përmbajtjes së faqes në internet, është ende e nevojshme t'i kushtohet vëmendje jo vetëm praktikës eksperimentale, por edhe të shikojmë përvojën e kolegëve.

Margjinat dhe mbushja janë stile shumë të rëndësishme kur ndërtoni një faqe HTML. Ato ju lejojnë të poziciononi më saktë elementët, të krijoni një kornizë me boshllëqet e nevojshme, etj. Të dy stilet janë shumë të ngjashëm dhe kryejnë funksione të ngjashme. Por ka ende dallime.

Elementet mund të jenë të folezuar ose të vendosura pranë njëri-tjetrit. Le të shohim shembullin e mëposhtëm:

Kemi dy tavolina, limon dhe ngjyre blu, të vendosura njëra poshtë tjetrës. Tabelat përbëhen nga një qelizë. Ka një bllok të kuq në qelizën e parë të tabelës. Duke përdorur këtë shembull, le të shohim se si funksionojnë margjinat dhe indencat.

Fushat përcaktohen sipas stilit mbushje. Ky stil vlen vetëm për elementët e kontejnerëve, të cilët mund të përmbajnë elementë të tjerë. Stili ju lejon të vendosni kufirin midis skajeve të një elementi dhe përmbajtjes së tij. Stili diferencë ju lejon të vendosni indencat nga një element në kufijtë më të afërt të një elementi tjetër. Kufijtë e një elementi tjetër mund të jenë kufijtë e kontejnerit prind, si dhe skajet e vetë faqes.

Ka disa mënyra për të vendosur këto stile. Për shembull, specifikoni drejtpërdrejt madhësinë e të gjitha margjinave ose indenteve me një argument në disa njësi matëse (px, ex, em, pt, cm, e kështu me radhë):

mbushje: 3 px; diferenca: 3 px;

Në këtë rast, kufijtë dhe dhëmbëzat do të jenë të njëjta në të katër anët. Kur specifikoni dy argumente të ndara nga një hapësirë:

mbushje: 3px 5px; diferenca: 3px 5px;

e para do të përcaktojë sasinë e kufijve/vërinjeve në krye dhe në fund, e dyta - në të majtë dhe në të djathtë. Kur jepen tre argumente:

mbushje: 3px 5px 2px; diferenca: 3px 5px 2px;

e para është margjina/dhënia në krye, e dyta është edhe majtas edhe djathtas, e treta është në fund. Me katër argumente:

mbushje: 3px 5px 2px 6px; margjina: 3px 5px 2px 6px;

e para është diferenca/hapësira sipër, e dyta është në të djathtë, e treta është në fund, e katërta është në të majtë. Është e lehtë të mbahet mend: e para është nga lart, pastaj në drejtim të akrepave të orës. Përveç kësaj, ju mund të vendosni kufijtë dhe mbushjen për një skaj specifik veçmas, duke përdorur stilet e duhura: mbushje-top, mbushje-djathtas, mbushje-fund, mbushje-majtas, marzh-majë, marzh-djathtas, marzh-fund, margjina-majtas. Vlera e këtyre stileve mund të jetë vetëm një argument, i cili specifikon sasinë e marzhit/mbushjes për një anë të caktuar.

Në figurë, blloku i kuq është brenda qelizës së tabelës dhe ngjitur me kufijtë e saj, domethënë qeliza nuk ka kufij. Le të vendosim kufijtë e qelizave duke përdorur stilin:

mbushje: 5 px;

Si rezultat, faqja do të ndryshojë në vijim:

Le të shohim tani dhëmbjet. Dy tabela janë ngjitur me njëra-tjetrën, nëse duam t'i largojmë pak, mund të aplikojmë dhëmbëza. Këtu ka dy opsione: ose vendosni hyrjen e poshtme të tabelës së parë, ose hyrjen e sipërme të tabelës së dytë. Le të përdorim të dytën:

margin-lart: 5px;

Ju lutemi vini re se ne vendosëm dhëmbëzimin në mënyrë specifike në tabelë, dhe jo në qelizën e tabelës, siç është rasti me fushat. Këtu është rezultati:

Nga rruga, në rastin e parë (hendeku midis bllokut të kuq dhe kufijve të qelizës mëmë), i njëjti efekt mund të arrihet duke vendosur dhëmbëzimin e bllokut. Në përgjithësi, nëse diçka nuk është e qartë, na tregoni në komente.

Kodi HTML i faqes eksperimentale:

<html > <kokë > <titulli > Test</titull> <meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </kokë> <trup > <stil > tabela (gjerësia: 200 pikselë; lartësia: 150 pikselë; kufiri: 1 pikselë solid #555; palosja e kufirit: paloset) td (rreshtimi vertikal: lart; mbushja: 0 pikselë) div (gjerësia: 100 px; lartësia: 100 px; sfondi: i kuq)</stili> <style table = "background: gëlqere" > <tr > <td style = "mbushje: 5px" > <div style = "margin: 0px" ></div> </td> </tr> </tabela> <stil tavoline = "sfondi: bojëqielli; margjina në krye: 5 px"> <tr > <td ></td> </tr> </tabela> </trupi> </html>

Diten e mire! Vendosja e dhëmbëzimeve për tekstin dhe fotografitë është tema kryesore e botimit të sotëm. Le të hedhim një vështrim më të afërt se cilat qasje mund të zbatohen në praktikë.

Kur krijon një faqe interneti, një webmaster merret me blloqe teksti dhe fraza të vendosura në faqet e projektit. Zgjidhja e problemeve individuale përfshin duke përdorur HTML etiketat e shtuara në redaktues. Ekzistojnë disa lloje atributesh që ju lejojnë të zhvendosni frazat ose të ndryshoni vendndodhjen e fragmenteve faqe elektronike.

Vendosja e dhëmbëzimeve duke futur hapësira

Le të shohim se si të futim tekstin në HTML duke përdorur etiketë speciale, duke siguruar formimin e një hendeku. Është e nevojshme të futni kodin numrin e kërkuar herë në mënyrë që të arrihet devijimi i dëshiruar nga skaji i faqes.

Kodi i mësipërm mund të përpunohet nga të gjitha llojet e shfletuesve dhe webmaster do të marrë një rezultat të garantuar. Disavantazhi i metodës janë aftësitë e kufizuara, sepse për të rritur distancën duhet të shtoni sasi e madhe etiketat, dhe kjo rrëmujë dokumentin.

Aplikimi i një etikete citimi

Duke studiuar në detaje se si të futni tekstin në kodin HTML, mund të hasni metodë alternative, duke dhënë më shumë mundësi.

Këtu do t'ju duhet të përdorni blloqe, e cila ju lejon të lëvizni fragmentin majtas dhe djathtas me rreth 40 px. Mjafton të shkruani kod identik me shembullin e dhënë:

Metoda ju lejon të manipuloni frazat brenda një vlere fikse prej 40 px. Vlen gjithashtu të theksohet se në këtë etiketë zakonisht përfundon me një citat.

Opsionet alternative

Nëse planifikoni të lëvizni një distancë jo standarde, do t'ju duhet të përdorni parametrin tekst-indent, i cili lidhet me stilin Tabela CSS. Metoda në shqyrtim siguron krijimin e një devijimi të rreshtit të parë nga distanca e kërkuar. Ndryshimet e mëposhtme duhet të bëhen në redaktues:

Kur është e nevojshme të matet numri i kërkuar i pikselëve nga një foto, preferohen kode të thjeshta por efektive.

Në rastin e parë, vendosen vetëm vlerat e kompensimit nga skajet e figurës. Në të dytën, pozicioni i figurës është vendosur në skajin e majtë me tekstin që rrjedh në të djathtë, dhe në të tretën - anasjelltas.

Informacionit i ka ardhur fundi. Më thuaj, a e gjete informacionin që po kërkonit? Përgjigja mund të shkruhet në komente.

Së fundi, do të përmend se blogu Workip i dedikohet kryesisht opsioneve monetare për të fituar para në internet. A e dini se cilat metoda janë vërtet premtuese financiarisht? Përshkrimet e disa prej tyre tashmë janë publikuar.

Publikimi i materialeve vazhdon. Abonohuni në email për përditësimet e projektit. Shihemi me vone.

Një burim në internet vlerësohet nga përdoruesit bazuar në tërheqjen e tij vizuale. Prandaj, qoftë edhe informativ tekst i dobishëm mund të mos lexohet për faktin se është i formatuar dobët. Përfundim - duhet t'i qaseni me kujdes dhe me vëmendje jo vetëm përmbajtjes semantike të faqeve të faqes, por edhe të saj paraqitje vizuale. Pamja e jashtme Teknologjitë CSS zgjeroi mundësitë e krijimit të artikujve tërheqës. Një nga vetitë e krijuara për ta bërë më të lehtë leximin e asaj që shkruhet është dhëmbëzimi. Teksti CSS.

Margjinat dhe mbushja: Cili është ndryshimi?

Para se të filloni të formatoni tekstin, duhet të kuptoni se cilat janë margjinat dhe indencat. Përkundër faktit se këta elementë të shënimit në disa raste duken të njëjta për përdoruesit, ekzistojnë dallime thelbësore midis tyre:

• fusha është e specifikuar nga prona mbushje, injeksion - diferencë;
• diferenca përcaktohet nga hendeku midis përmbajtjes dhe kufirit të bllokut, indenti - midis kufijve të blloqeve ngjitur;
• kufijtë mund ose nuk mund të merren parasysh në dimensionet e elementit (gjerësia dhe lartësia).

pronë e marzhit

Pra, për të vendosur dhëmbëzimin horizontal ose vertikal të tekstit CSS, përdorni konstruktin diferencë. Kjo pronë vlen për etiketën duke përcaktuar paragrafin e dokumentit. Në shumë rast i thjeshtë shkruhet si:

diferenca: 12 px.

Kjo linjë do të thotë që rreth bllokut të tekstit (ose çdo blloku tjetër) do të ketë një dhëmbëzim prej 12 pikselësh në të gjitha anët. Për të rritur intervalin, për shembull, tre herë, thjesht shkruani:

diferenca: 36 px.

Por, çka nëse intervali midis blloqeve duhet të jetë i ndryshëm në secilën anë? Zhvilluesit e faqeve të internetit përdorin disa forma regjistrimi:

1. diferenca: 11px 22px.
2. diferenca: 11px 22px 33px.
3. diferenca: 11px 22px 33px 44px.

Në shembullin e parë, 11 piksele do të futen nga kufiri i poshtëm dhe i sipërm i bllokut dhe 22 pikselë në anët e bllokut. Sipas formularit të dytë të regjistrimit, do të ketë 11 piksele midis skajit të sipërm të bllokut dhe përmbajtjes, 33 pikselë midis pjesës së poshtme dhe 22 pikselë në anët. Në rastin e tretë, mbushja do të jetë 11 piksel në krye, 22 piksel në të djathtë, 33 pikselë në fund dhe 44 pikselë në të majtë.

Është gjithashtu e mundur të regjistrohet distanca deri në kufirin e bllokut vetëm në njërën anë: margjina-lart, margjina-poshtë, margjina-majtas, margjina-djathtas. Duke përkthyer emrat e pronave në rusisht, është e lehtë të merret me mend qëllimi i tyre. Për shembull, hyrja e mëposhtme thotë se diferenca e duhur do të jetë 22 pikselë:

margjina-djathtas: 22 px.

Për anët e tjera, distancat rreth bllokut supozohen të jenë të barabarta me vlerën e elementit mëmë.

Prona diferencë ka një veçori që një zhvillues duhet ta ketë parasysh kur përdor dhëmbëzimin vertikal të tekstit CSS. Intervalet e elementeve ngjitur nuk përmblidhen, por mbivendosen mbi njëra-tjetrën. Për shembull, le të ketë një nga blloqet margjina e poshtme: 15 px, dhe bllokun ngjitur me të më poshtë margjina e sipërme: 35 px. Aritmetika e shkollës dhe sensi i shëndoshë sugjerojnë se hapësira totale midis tyre do të jetë 50 piksele. Në praktikë nuk është kështu. Blloko me vlera të mëdha Vetitë diferencë do të "thithë" fqinjin e tij. Si rezultat, hapësira midis elementeve do të jetë 35 piksele.

“Vija e kuqe

Hartimi i një dokumenti në redaktori i tekstit, përdoruesit preferojnë të pyesin secilin paragrafi i ri duke përdorur vijën e kuqe. Me ndihmën e CSS, është e lehtë të futet teksti në të majtë - përdoret ndërtimi tekst-indent. Është shkruar kështu:

teksti-indent: 11px.

Kjo do të thotë, rreshti i parë i paragrafit do të zhvendoset në lidhje me skajin e majtë me 11 piksel. Për ta bërë tekstin në një faqe në internet më shumë si një dokument në redaktues, duhet të vendosni gjithashtu, domethënë të shkruani:

teksti-indent: 11px;

text-align: justifikoj.

Përveç pikselëve, kur përshkruhen shenjat, lejohet të përdoren njësi të tjera - inç, pikë, përqindje. Lëreni bllokun të ketë një mbushje teksti CSS prej 10%. Me një gjerësi blloku prej 500 pikselësh, vija e kuqe do të jetë 50 pikselë (10% e 500).

Për të kësaj pasurie vlera mund të vendoset trashëgojnë. Kjo hyrje thotë se blloku përdor një veti të ngjashme të bllokut prind.

tekst-indent: trashëgoj.

Çuditërisht, mund të marrë edhe vlera negative! Në këtë rast, formohen të ashtuquajturat mbingarkesa, domethënë teksti kryesor mbetet në vend, dhe rreshti i parë zhvendoset në të majtë me 22 piksel:

teksti-indent: -22px.

Për të parandaluar që shkronjat të shkojnë përtej kufirit të majtë të shfletuesit, përveç tekst-indent ju duhet të përdorni konstruksionin për të vendosur fushën:

mbushje-majtas: 22 px.

Vetitë kryesore të CSS janë rishikuar. Dhe praktika do të ndihmojë në konsolidimin e tyre. Këtu janë disa këshilla përfundimtare për zbatimin e asaj që keni mësuar në zhvillimin e faqes tuaj të internetit:

• vija e kuqe dhe dhëmbëzimi i tekstit janë koncepte të ndryshme dhe veti të ndryshme përdoren për t'i treguar ato;
• Për kufijtë vertikalë rregullat e matematikës nuk zbatohen - intervalet mbivendosen, elementi me vlerën më të madhe "fiton";
• negativ dhëmbëzimi i paragrafit përdoret për të treguar rreshtin e parë të një paragrafi duke përdorur një imazh.

Përshëndetje, të dashur lexues të faqes së blogut! Sot do të vazhdojmë të mësojmë rreth fletëve të stilit Cascading ose CSS. Në artikujt e mëparshëm ne kemi parë tashmë skicë e përgjithshme faqosja e bllokut faqe. Si rezultat, filluam të kishim faqe interneti mjaft profesionale, por atyre u mungonte diçka. Por ka shumë të ngjarë që atyre u mungojnë dhëmbëzat dhe kornizat. Sot do të shikojmë rregullat e stilit të margjinës, mbushjes dhe kufirit, të cilat ju lejojnë të vendosni indencat dhe kornizat për elementët html.

Opsionet e mbushjes CSS

Me ndihmën e fletëve të stilit kaskadë, është e mundur të vendosni dy lloje të dhëmbëzuara.

1.dhëmbëzimiështë distanca nga kufiri imagjinar i elementit në përmbajtjen e tij. Vlera e distancës përcaktohet duke përdorur parametrin mbushje. Kjo dhëmbëzim i përket vetë elementit dhe ndodhet brenda tij.

2. Marzhi— distanca midis kufirit të elementit aktual të faqes së internetit dhe kufijve të elementeve fqinjë, ose elementi prind. Madhësia e distancës kontrollohet nga prona diferencë. Kjo dhëmbëzim ndodhet jashtë elementit.

Për qartësi, foto:

Për shembull, merrni parasysh një qelizë të mbushur me tekst. Pastaj mbushja është distanca midis kufirit imagjinar të qelizës dhe tekstit që ajo përmban. Dhe diferenca e jashtme është distanca midis kufijve të qelizave ngjitur. Le të fillojmë me mbushjen.

Mbushja në CSS duke përdorur mbushjen (lart, poshtë, majtas, djathtas)

Vetitë e stilit padding-left, padding-top, padding-right dhe padding-bottom ju lejojnë të vendosni vlerat e mbushjes, përkatësisht, në të majtë, në krye, në të djathtë dhe në fund të një elementi të faqes në internet:

mbushje-top | mbushje-djathtas | mbushje-fund | padding-left: vlera | interesi | trashëgojnë

Sasia e dhëmbëzimit mund të specifikohet në piksel (px), përqindje (%) ose njësi të tjera të pranueshme për CSS. Kur specifikoni përqindjet, vlera llogaritet nga gjerësia e elementit. Kuptimi i trashëgimisë tregon se është trashëguar nga prindi.

Për shembull, për paragrafin aktual, unë zbatova një rregull stili që vendos mbushjen e majtë në 20 pikselë, mbushjen e sipërme në 5 pikselë, mbushjen e djathtë në 35 pikselë dhe mbushjen e poshtme në 10 pikselë. Hyrja e rregullit do të duket kështu:

p.test(
mbushje-majtas:20px;
padding-top:5px;
mbushje-djathtas:35px;
mbushje-fund: 10 px
}

Rregulli i mbushjes së përbërë ju lejon të specifikoni hyrjet në të gjitha anët e një elementi të faqes në internet menjëherë:

mbushje:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

NË rregull kolektiv Ju mund të përdorni një, dy, tre ose katër vlera, duke i ndarë ato me një hapësirë. Në këtë rast, efekti varet nga numri i vlerave:

• nëse specifikoni një vlerë, ajo do të vendosë sasinë e dhëmbëzimit në të gjitha anët e elementit të faqes;
• nëse specifikoni dy vlera, e para do të vendosë sasinë e dhëmbëzimit në krye dhe në fund, dhe e dyta - në të majtë dhe në të djathtë;
• nëse specifikoni tre vlera, atëherë e para do të përcaktojë sasinë e dhëmbëzimit në krye, e dyta - në të majtë dhe të djathtë, dhe e treta - në fund;
• nëse specifikohen katër vlera, e para do të vendosë sasinë e dhëmbëzimit në krye, e dyta në të djathtë, e treta në fund dhe e katërta në të majtë.

Kështu, rregulli CSS i mësipërm mund të shkurtohet sa më shumë që të jetë e mundur dhe të shkruhet si më poshtë:

p.test (mbushje: 5px 35px 10px 20px)

Vetia e marzhit ose kufijtë në CSS

Atributet e stilit margin-left, margin-lart, margin-djathtas dhe margin-bottom ju lejojnë të vendosni vlerat e marzhit, përkatësisht, majtas, lart, djathtas dhe poshtë:

marzh-lart | marzh-djathtas | marzh-fund | margjina e majtë:<значение>|auto|trashëgojë

Siç u përmend më lart, marzhi është distanca nga kufiri i elementit aktual në kufirin e elementit ngjitur, ose, nëse nuk ka elementë fqinjë, në kufirin e brendshëm të kontejnerit mëmë.

Sasia e dhëmbëzimit mund të specifikohet në piksel (px), përqindje (%) ose njësi të tjera të lejuara për CSS:

p(
margjina-majtas: 20px;
}
h1(
marzh-djathtas:15%;
}

Vlera automatike do të thotë që madhësia e dhëmbëzimit do të llogaritet automatikisht nga shfletuesi. Nëse përdorni shënimin e përqindjes, dhëmbëzimi llogaritet në varësi të gjerësia e kontejnerit mëmë. Për më tepër, kjo vlen jo vetëm për margjinën-majtas dhe margjinën-djathtas, por edhe për marzhin-lart dhe margjinën-poshtë, marzhet e përqindjes do të llogariten në varësi të gjerësisë, jo lartësisë, të kontejnerit.

Lejohet të përdoret si vlera e indenteve të jashtme vlerat negative:

p(
margjina-majtas:-20px;
}

Nëse me vlera pozitive të dhëmbëzimit elementët fqinjë janë larguar, atëherë me vlerë negative blloku ngjitur do të përplaset me elementin për të cilin kemi vendosur një kompensim të tillë negativ.

Mund të specifikojmë gjithashtu mbushjen duke përdorur atributin stil diferencë. Ai vendos vlerat e dhëmbëzimit njëkohësisht në të gjitha anët e një elementi të faqes në internet:

marzhi:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Kur specifikoni një, dy, tre ose katër vlera të mbushjes, kjo veti u bindet të njëjtave ligje si rregulli i mbushjes.

Opsionet e kufirit duke përdorur vetinë e kufirit

Kur vendosni kornizat, ekzistojnë tre lloje parametrash:

• gjerësia e kufirit - trashësia e kufirit;
• border-color - ngjyra e kufirit;
• border-style - lloji i vijës me të cilën do të vizatohet korniza.

Le të fillojmë me parametrin e trashësisë së kornizës:

gjerësia e kufirit: [vlera | i hollë | e mesme | trashë] (1,4) | trashëgojnë

Trashësia e kornizës mund të specifikohet në pixel, ose në të tjera të disponueshme në njësitë css. Variablat e hollë, të mesëm dhe të trashë vendosin trashësinë e kufirit në 2, 4 dhe 6 piksele, përkatësisht:

gjerësia e kufirit: e mesme;

Ashtu si me vetitë e mbushjes dhe kufirit, parametri i gjerësisë së kufirit lejon një, dy, tre ose katër vlera, duke vendosur kështu gjerësinë e kufirit për të gjitha anët menjëherë ose për secilën anë veç e veç:

gjerësia e kufirit: 5px 3px 5px 3px

Për paragrafin aktual, bëni trashësinë e kufirit të sipërm 1px, djathtas 2px, 3px poshtë dhe majtas 4px duke përdorur rregullin (gjerësia e kufirit: 1px 2px 3px 4px;)

Duke përdorur atributet e stilit border-left-width, border-lart-width, border-right-width dhe border-bottom-width, mund të vendosni përkatësisht trashësinë e anës së majtë, të sipërme, të djathtë dhe të poshtme të kufirit:

kufiri-majtë-gjerësi|border-lartë-gjerësi|border-djathtas-gjerësi|border-poshtë-gjerësi: i hollë|mesatar|i trashë|<толщина>|trashëgojnë

Parametri tjetër është ngjyra e kufirit me të cilën mund të kontrolloni ngjyra e kornizës:

kufiri-ngjyra: [ngjyra | transparent] (1,4) | trashëgojnë

Vetia ju lejon të vendosni ngjyrën e kufirit për të gjitha anët e elementit menjëherë ose vetëm për ato të specifikuara. Si vlerë, mund të përdorni metodat e përdorura për specifikimin e ngjyrave në HTML: kodin heksadecimal, fjalë kyçe, etj.:

p (gjerësia e kufirit: 2 px; ngjyra e kufirit: e kuqe)

transparent vendos ngjyrën transparente të kufirit dhe trashëgon vlerën e prindit. Si parazgjedhje, nëse ngjyra e kufirit nuk është e specifikuar, do të përdoret ajo e përdorur për fontin brenda elementit të dhënë.

Duke përdorur atributet e stilit kufiri-ngjyra e majtë, ngjyra e kufirit-lart, ngjyra e kufirit-djathtas dhe ngjyra e kufirit-poshtë, mund të vendosni përkatësisht ngjyrën e anës së majtë, të sipërme, të djathtë dhe të poshtme të kufirit:

border-left-color|border-top-color|border-djathtas-color|border-the-bottom-ngjyra: transparente|<цвет>|trashëgojnë

DHE parametri i fundit kufiri-style specifikon lloji i kornizës:

kufiri-style: (1,4) | trashëgojnë

Lloji i kornizës mund të specifikohet për të gjitha anët e një elementi menjëherë ose vetëm për ato të specifikuara. Mund të përdoren disa vlera fjalë kyçe. Pamja do të varet nga shfletuesi i përdorur dhe trashësia e kornizës. Kuptimi asnje përdoret si parazgjedhje dhe nuk shfaq kornizën dhe trashësia e saj është vendosur në zero. Vlera e fshehur ka të njëjtin efekt. Korniza që rezulton për vlerat e tjera, në varësi të trashësisë, tregohet në tabelën e mëposhtme:

Atributet e stilit të stilit kufiri-majtë, stili i skajit-lart, stili i kufirit-djathtas dhe stili i kufirit-poshtë specifikojnë stilin e linjave që do të vizatohen në anët e majta, të sipërme, të djathta dhe të poshtme të kufirit, përkatësisht:

kufiri-left-style|border-top-style|border-right-style|border-bottom-style: asnjë|fshehur|me pika|të ndërprera|të ngurta|dyshe|groove|kreshtë|hyrje|fillim|trashëgim

Ashtu si me opsionet e mbushjes dhe mbushjes, ka pronë universale kufiri. Kjo ju lejon të vendosni njëkohësisht trashësinë, stilin dhe ngjyrën e kufirit rreth një elementi:

kufiri: | trashëgojnë

Vlerat mund të jenë në çdo mënyrë, të ndara me hapësira:

td (kufiri: 1px e verdhë e fortë)

Për të vendosur një kufi vetëm në anët e caktuara të një elementi, ekzistojnë vetitë border-lartë, kufiri-poshtë, kufiri-majtas, kufiri-djathtas, të cilat ju lejojnë të vendosni parametra për sipër, poshtë, majtas dhe anën e djathtë kornizë

Gjithçka që mbetet është të përmbledhim:

• për detyrën mbushje ne përdorim pronën mbushje;
• për cilësimet kufijtë ka një rregull diferencë;
• parametrat e kornizës specifikohen duke përdorur atributin kufiri.

Unë vërej se të gjitha këto vetitë css rrit madhësinë e një elementi të faqes në internet. Prandaj, nëse ndryshojmë trashësinë e kufirit ose madhësinë e mbushjes së kontejnerëve të bllokut që formojnë dizajnin e faqes së internetit, do të duhet të ndryshojmë madhësinë e këtyre kontejnerëve në përputhje me rrethanat, përndryshe ato mund të lëvizin dhe dizajni do të jetë i thyer.

Kjo është e gjitha, shihemi herën tjetër!