Iepriekšējā nodaļā mēs tādus minējām CSS īpašības, piemēram, piemale (lauks) un polsterējums (atkāpe). Tagad mēs tos aplūkosim sīkāk un apsvērsim, kā tie atšķiras viens no otra un kādas funkcijas tiem ir.

Atstarpes starp elementiem var izveidot vienā vai otrā veidā, bet, ja polsterējums ir atkāpe no satura līdz bloka malai, tad mala ir attālums no viena bloka līdz otram, starpbloku telpa. Ekrānuzņēmums parāda skaidru piemēru:

Polsterējums atdala saturu no bloka robežas, un mala rada atstarpes starp blokiem

Kā redzat, CSS piemales un polsterējums atšķiras viens no otra, lai gan dažreiz, neapskatot kodu, nav iespējams noteikt, kura īpašība tiek izmantota attāluma iestatīšanai. Tas notiek, ja satura blokam trūkst rāmja vai fona.

Ir šādi rekvizīti, lai iestatītu piemales vai polsterējumu CSS katrā elementa pusē:

Polsterējums:

• polsterējums: nozīme;
• polsterējums pa labi: nozīme;
• polsterējums apakšā: nozīme;
• polsterējums pa kreisi: nozīme;

Lauki:

• piemale augšpusē: nozīme;
• piemale-labais: nozīme;
• margin-bottom: nozīme;
• margin-kreisais: nozīme;

Vērtības var norādīt jebkurā CSS vienībā - px, em, % utt. Piemērs: margin-top: 15px .

Ir arī ļoti ērta lieta, piemēram saīsinājums piemalei un pildījumam CSS. Ja jums ir jāiestata piemales vai polsterējums visām četrām elementa pusēm, jums nav jāraksta rekvizīts katrai pusei atsevišķi. Viss ir padarīts vienkāršāks: piemalei un polsterējumam varat norādīt 1, 2, 3 vai 4 vērtības vienlaikus. Vērtību skaits nosaka, kā iestatījumi tiek sadalīti:

• 4 vērtības: polsterējums ir iestatīts visām elementa pusēm šādā secībā: augšā, pa labi, apakšā, pa kreisi: polsterējums: 2px 4px 5px 10px;
• 3 vērtības: polsterējums vispirms tiek iestatīts augšējai pusei, pēc tam vienlaikus kreisajai un labajai pusei un pēc tam apakšējai pusei: polsterējums: 3 pikseļi 6 pikseļi 9 pikseļi;
• 2 vērtības: polsterējums vispirms tiek iestatīts vienlaikus no augšējās un apakšējās malas, un pēc tam vienlaikus pa kreisi un pa labi: polsterējums: 6 pikseļi 12 pikseļi;
• 1 vērtība: vienāds polsterējums ir iestatīts visām elementa pusēm: polsterējums: 3px;

Tie paši noteikumi attiecas uz CSS maržas īpašumu. Lūdzu, ņemiet vērā, ka piemalei varat izmantot arī negatīvas vērtības (piemēram, -3 pikseļi), kas dažkārt var būt ļoti noderīgi.

Sakļaut piemale

Iedomājieties situāciju: divi bloka elementi atrodas viens virs otra un tiem ir doti piemales lauki. Augšējais bloks ir iestatīts uz piemale: 60 pikseļi , bet apakšējais bloks ir iestatīts uz piemale: 30 pikseļi . Būtu loģiski pieņemt, ka divu elementu divi robežlauki vienkārši saskarsies, un rezultātā atstarpe starp blokiem būs vienāda ar 90 pikseļiem.

Tomēr lietas ir atšķirīgas. Faktiski šādā situācijā rodas efekts, ko sauc par sabrukumu, kad no diviem blakus esošiem elementu laukiem tiek izvēlēts lielākais izmērs. Mūsu piemērā galīgā atstarpe starp elementiem būs 60 pikseļi.

Attālums starp blokiem ir vienāds ar lielāko no vērtībām

Sakļaujamā piemale darbojas tikai elementu augšējai un apakšējai piemalei, un tā neattiecas uz piemalēm labajā un kreisajā pusē. Galīgo atstarpes vērtību dažādās situācijās aprēķina atšķirīgi:

• Ja abas piemales vērtības ir pozitīvas, iegūtais piemales lielums būs vienāds ar lielāko vērtību.
• Ja viena no vērtībām ir negatīva, tad, lai aprēķinātu lauka lielumu, jums jāiegūst vērtību summa. Piemēram, ja vērtības ir 20 pikseļi un -18 pikseļi, lauka lielums būs šāds:
  20 + (-18) = 20–18 = 2 pikseļi.
• Ja abas vērtības ir negatīvas, tiek salīdzināti šo skaitļu moduļi un tiek atlasīts skaitlis ar lielāku moduli (tātad mazākais no negatīvajiem skaitļiem). Piemērs: jums ir jāsalīdzina lauku -6px un -8px vērtības. Salīdzināmo skaitļu moduļi ir attiecīgi 6 un 8. No tā izriet, ka 6 -8. Iegūtais lauka lielums ir -8 pikseļi.
• Gadījumā, ja vērtības ir norādītas dažādas vienības CSS, tie tiek samazināti līdz vienam, pēc tam tie tiek salīdzināti un tiek atlasīta lielākā vērtība.
• Piemales lielums bērnu elementiem tiek noteikts vēl interesantākā veidā: ja bērnam ir lielāka rezerve nekā vecākam, tad tam tiek dota prioritāte. Šajā gadījumā vecāka augšējās un apakšējās malas izmēri būs tādi paši kā bērnam norādītie. Šajā gadījumā nebūs attāluma starp vecāku un bērnu.

Piemales un polsterējums ir ļoti svarīgi stili, veidojot HTML lapu. Tie ļauj precīzāk novietot elementus, izveidot rāmi ar nepieciešamajām spraugām utt. Abi stili ir ļoti līdzīgi un veic līdzīgas funkcijas. Bet joprojām pastāv atšķirības.

Elementi var būt ligzdoti vai izvietoti blakus viens otram. Apskatīsim šādu piemēru:

Mums ir divi galdi, citrona un zila, kas atrodas viens zem otra. Tabulas sastāv no vienas šūnas. Pirmajā tabulas šūnā ir sarkans bloks. Izmantojot šo piemēru, apskatīsim, kā darbojas piemales un atkāpes.

Lauki ir iestatīti pēc stila polsterējums. Šis stils attiecas tikai uz konteinera elementiem, kas var saturēt citus elementus. Stils ļauj iestatīt malu starp elementa malām un tā saturu. Stils starpībaļauj iestatīt atkāpes no elementa līdz tuvākajām cita elementa robežām. Cita elementa apmales var būt vecākkonteinera apmales, kā arī pašas lapas malas.

Ir vairāki veidi, kā iestatīt šos stilus. Piemēram, tieši norādiet visu piemaļu vai atkāpju lielumu ar vienu argumentu kādā mērvienībā (px, ex, em, pt, cm un tā tālāk):

polsterējums: 3px; piemale: 3px;

Šajā gadījumā piemales un atkāpes būs vienādas visās četrās pusēs. Norādot divus argumentus, kas atdalīti ar atstarpi:

polsterējums: 3px 5px; piemale: 3px 5px;

pirmais noteiks piemaļu/atkāpju daudzumu augšā un apakšā, otrais - kreisajā un labajā pusē. Ja tiek sniegti trīs argumenti:

polsterējums: 3px 5px 2px; piemale: 3px 5px 2px;

pirmā ir piemale/atkāpe augšpusē, otrā ir gan pa kreisi, gan pa labi, trešā ir apakšā. Ar četriem argumentiem:

polsterējums: 3px 5px 2px 6px; piemale: 3px 5px 2px 6px;

pirmā ir piemale/atstarpe augšpusē, otrā ir labajā pusē, trešā ir apakšā, ceturtā ir kreisajā pusē. To ir viegli atcerēties: pirmais ir no augšas, pēc tam pulksteņrādītāja virzienā. Turklāt varat atsevišķi iestatīt piemales un polsterējumu noteiktai malai, izmantojot atbilstošos stilus: polsterējums-top, polsterējums-pa labi, polsterējums-apakšā, polsterējums-pa kreisi, margin-top, mala-labais, piemale-apakša, piemale-kreisais. Šo stilu vērtība var būt tikai viens arguments, kas norāda piemales/polsterējuma apjomu konkrētajai pusei.

Attēlā sarkanais bloks atrodas tabulas šūnas iekšpusē un blakus tās robežām, tas ir, šūnai nav piemales. Iestatīsim šūnu piemales, izmantojot stilu:

polsterējums: 5 pikseļi;

Rezultātā lapa tiks mainīta uz šādu:

Tagad apskatīsim ievilkumus. Divas tabulas atrodas blakus viena otrai, ja vēlamies tās nedaudz atdalīt, varam izmantot atkāpes. Šeit ir divas iespējas: iestatīt pirmās tabulas apakšējo atkāpi vai otrās tabulas augšējo atkāpi. Izmantosim otro:

mala augšpusē: 5 pikseļi;

Lūdzu, ņemiet vērā, ka mēs iestatām atkāpi tieši tabulai, nevis tabulas šūnai, kā tas ir laukos. Lūk, rezultāts:

Starp citu, pirmajā gadījumā (atstarpe starp sarkano bloku un vecākšūnas robežām) tādu pašu efektu varētu panākt, iestatot bloka atkāpes. Kopumā, ja kaut kas nav skaidrs, paziņojiet mums komentāros.

Testa lapas HTML kods:

<html > <galva> <virsraksts > Pārbaude</title> <meta http-equiv = "Satura veids" content = "text/html;charset=utf-8" > </head> <ķermenis > <stils > tabula (platums: 200 pikseļi; augstums: 150 pikseļi; apmale: 1 pikseļi ciets #555; apmales sakļauts: sakļaut) td (vertikāli izlīdzināts: augšpusē; polsterējums: 0 pikseļi) div (platums: 100 pikseļi; augstums: 100 pikseļi; fons: sarkans)</style> <tabulas stils = "fons: laima" > <tr > <td style = "polsterējums: 5 pikseļi" > <div style = "margin: 0px" ></div> </td> </tr> </tabula> <galda stils = "fons: debeszils; malas augšdaļa: 5 pikseļi"> <tr > <td ></td> </tr> </tabula> </body> </html> Polsterējums-top

Es ceru, ka jūs jau esat iepazinies ar bloka struktūru. Ja nē, tas ir parādīts zemāk.

Bloku struktūra

Tātad. Jūs droši vien jau zināt, ka bloka piemales un piemales attēlo attiecīgi polsterējuma un piemales īpašības. Un iepriekšējā rakstā mēs jau daļēji pieskārāmies šai tēmai. Šajā lapā mēs sīkāk aplūkosim laukus ( polsterējums) un polsterējums ( starpība ).

Piemales un polsterējuma īpašības ir ļoti līdzīgas viena otrai un veic līdzīgas funkcijas, tāpēc tās bieži tiek sajauktas. Bet, protams, to nevajadzētu darīt, jo piemales un atkāpes ir pilnīgi atšķirīgas lietas. Tomēr tas ir skaidri redzams no attēla, jo tas nav nejauši parādīts šeit.

Tātad. Piemales nosaka polsterējuma rekvizīts. Tie ir iekšējie attālumi no bloka robežām līdz tā saturam.

Īpašums attiecas uz visiem elementiem.

Attālums tiek norādīts CSS garuma vienībās, % vai ( noklusējuma

Polsterējuma rekvizīts ir universāls, jo iestata piemales no elementa apmalēm līdz tā saturam visām tā pusēm, tādējādi apvienojot rekvizītus padding-top , padding-right , padding-bottom un padding-left , kas nosaka elementa platumu. piemales katram sānu elementam atsevišķi.

Atkāpes tiek iestatītas, izmantojot margin īpašību, kas nosaka attālumu no bloka robežām līdz tuvākajiem elementiem vai pārlūkprogrammas loga malām.

Margas īpašība attiecas arī uz visiem elementiem.

Polsterējums ir norādīts arī CSS garuma vienībās, % vai ( noklusējuma) tiek automātiski noteikts pārlūkprogrammā.

Piemales īpašība ir universāla, jo tā nosaka atkāpes apjomu no elementa malām visām tā malām, tādējādi apvienojot īpašības margin-top , margin-right , margin-bottom un margin-left , kas nosaka atkāpju platumu. no katra elementa malas atsevišķi .

Un vēl viena lieta: ievilkumi ( starpība) atrodas ārpus bloka, savukārt malas ( polsterējums) tā iekšpusē, tātad bloka fons vai tas fona attēls attiecas tikai uz piemalēm, un atkāpes vienmēr ir caurspīdīgas vai tām ir galvenās fons ( vecāku) bloka vai lapas fons.

Koda fragments: