marginĪpašums definē ārējais daļu box modelis, radot telpu ap elementu, ārpus jebkādas noteiktajās robežās.
Piemales tiek iestatītas, izmantojot garumus, procentus vai atslēgvārdu, autoun tām var būt negatīvas vērtības. Lūk, piemērs:
.box ( margin: 0 3em 0 3em; )margin ir stenogrāfijas īpašums un pieņem līdz četrām vērtībām, kas parādītas šeit:
.box ( margin: || || || )Ja ir iestatītas mazāk par četrām vērtībām, trūkstošās vērtības tiek pieņemtas, pamatojoties uz definētajām. Piemēram, šādi divi noteikumu kopumi iegūtu identiskus rezultātus:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Tādējādi, ja tiek definēta tikai viena vērtība, visas četras piemales tiek iestatītas uz vienu un to pašu vērtību. Ja tiek deklarētas trīs vērtības, tā ir margin: (top) (left-and-right) (bottom);.
Jebkuru atsevišķo piemali var deklarēt, izmantojot garo roku, tādā gadījumā katram īpašumam jūs definējat tikai vienu vērtību:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto un centrēšana
Katra no piemales īpašībām var pieņemt arī vērtību auto. Vērtība autogalvenokārt liek pārlūkprogrammai noteikt jums rezervi. Vairumā gadījumu vērtība autobūs ekvivalenta vērtībai 0(kas ir sākotnējā vērtība katras piemales īpašībai) vai citai vietai, kas ir pieejama elementa tajā pusē. Tomēr tas autoir ērts horizontālai centrēšanai:
.container ( width: 980px; margin: 0 auto; )Šajā piemērā tiek veiktas divas lietas, lai centrētu šo elementu horizontāli pieejamā telpā:
- Elementam tiek piešķirts noteikts platums
- Kreisās un labās malas ir iestatītas uz
auto
Bez norādītā platuma autovērtībām būtībā nebūtu nekādas ietekmes, nosakot kreiso un labo malu uz 0citu, neatkarīgi no tā, kāda ir pieejamā vieta vecāka elementa iekšpusē.
Jāatzīmē arī tas, ka tas autoir noderīgi tikai horizontālai centrēšanai, tāpēc, izmantojot autoaugšējās un apakšējās malas, elements netiks centrēts vertikāli, kas iesācējiem var būt mulsinošs.
Sabrūk piemales
Vertikālās piemales dažādiem elementiem, kas pieskaras viens otram (tādējādi tiem nav satura, polsterējuma vai robežas, kas tos atdala), sabruks, veidojot vienu piemali, kas ir vienāda ar lielāko no blakus esošajām malām. Tas nenotiek uz horizontālām malām (pa kreisi un pa labi), tikai vertikāli (augšā un apakšā).
Lai ilustrētu, izmantojiet šādu HTML:
Collapsing Margins
Example text.Un šāds CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )Šajā piemērā h2elementam tiek piešķirta apakšējā mala 20 pikseļi. Rindkopas elementam, kas uzreiz seko tam avotā, augšējā mala ir iestatīta uz 10 pikseļiem.
Veselais saprāts, šķiet, liek domāt, ka vertikālās robežas biezums starp h2un rindkopu kopā būtu 30 pikseļi (20 pikseļi + 10 pikseļi). Bet starpības sabrukuma dēļ faktiskais biezums beidzas ar 20 pikseļiem. Tas parādīts iegultā pildspalvā:
Lai arī no pirmā acu uzmetiena sabrukušās robežas var šķist neticamas, tās faktiski ir noderīgas dažu iemeslu dēļ. Pirmkārt, tie neļauj tukšiem elementiem pievienot papildu, parasti nevēlamu, vertikālu atstarpes atstarpi.
Otrkārt, tie pieļauj konsekventāku pieeju universālo piemaksu deklarēšanai starp lapas elementiem. Piemēram, virsrakstos parasti ir atstarpe vertikāli, tāpat arī rindkopās. Ja piemales nesabruks, virsrakstiem, kas seko rindkopām (vai otrādi), bieži būs nepieciešams atiestatīt piemales vienam no elementiem, lai panāktu vienmērīgu vertikālo atstarpju daudzumu.
Treškārt, piemales sabrukums attiecas arī uz ligzdotajiem elementiem. Paskaties uz šo pildspalvu:
Šeit rindkopas elementa augšējā mala ir iestatīta uz 30 pikseļiem, un tā ir ievietota divelementa iekšpusē ar augšējo piemaksu 40 pikseļu. Turklāt h2elementa apakšējā mala ir 20 pikseļi.
Atkal veselais saprāts liecina, ka kopējā vertikālās atstarpes telpa šeit būtu 90 pikseļi (20 pikseļi + 40 pikseļi + 30 pikseļi), bet tā vietā visas piemales sabrūk vienā 40 pikseļu atstarpē (augstākā no trim). Tas ir noderīgi vairumā gadījumu, jo nav nepieciešams no jauna definēt nevienu augšējo piemali, lai noņemtu papildu vertikālo atstarpi.
Negatīvās robežas
Kā jums varētu būt aizdomas, lai gan pozitīva starpības vērtība izstumj citus elementus, negatīva rezerve vai nu pavilks pašu elementu šajā virzienā, vai citus elementus uz to.
Šeit ir konteinera ar polsterējumu piemērs, un galvenei h2 ir negatīvas piemales, kas caur šo polsterējumu izvelk sevi atpakaļ uz malām:
Skatiet
Krāsa Koijera (@chriscoyier) visbiežāk izmantoto negatīvo starpību lietojumprogrammu
CodePen.
Lūk, piemērs, kur pirmajai rindkopai ir negatīva apakšējā starpība, kas nākamo rindkopu velk pretī.
Skatiet
Kriss Koijera (@chriscoyier) Pen Negative Margin apakšējo rindkopu
vietnē CodePen.
Pārlūka atbalsts
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Darbi | Darbi | Darbi | Darbi | Darbi | Darbi | Darbi |
IE6 ir pakļauta dubultotai float-margin kļūdai, kuru vairumā gadījumu var novērst, pievienojot peldošo display: inlineelementu.