Polsterējums - CSS-triki

paddingĪpašums CSS nosaka visdziļākais daļu box modelis, radot telpu ap elementa saturu, iekšpusē jebkuru definētas robežas un / vai robežu.

Pildījuma vērtības tiek iestatītas, izmantojot garumus vai procentus, un tās nevar pieņemt negatīvas vērtības. Sākotnējā vai noklusējuma vērtība visām polsterējuma īpašībām ir 0.

Šeit ir vienkāršs piemērs:

.box ( padding: 0 1.5em 0 1.5em; )

Iepriekš minētajā piemērā tiek izmantots paddingstenogrāfijas rekvizīts, kas pieņem līdz četrām šeit parādītajām vērtībām:

.box ( padding: || || || )

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 ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )

Tādējādi, ja ir definēta tikai viena vērtība, visām četrām polsterējuma īpašībām tiek iestatīta viena un tā pati vērtība:

.box ( padding: 20px; )

Ja tiek deklarētas trīs vērtības, tā ir padding: (top) (left-and-right) (bottom);.

Jebkuru no atsevišķām polsterējuma īpašībām var deklarēt, izmantojot garo roku, tādā gadījumā katram īpašumam jūs definētu tikai vienu vērtību. Tātad iepriekšējo piemēru varētu pārrakstīt šādi:

.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )

Polsterējuma un elementa platuma aprēķini

Ja elementam ir noteikts platums, jebkurš šim elementam pievienotais polsterējums tiks pievienots elementa kopējam platumam. Tas bieži ir nevēlams rezultāts, jo tas prasa, lai katru reizi, kad tiek pielāgots polsterējums, elementa platums ir jāpārrēķina. (Ņemiet vērā, ka tas notiek arī ar augstumu, taču lielākoties elementam nav ieteicams piešķirt noteiktu augstumu.)

Piemēram:

.box ( padding: 20px; width: 400px; )

Šajā piemērā, lai arī .boxelementam ir noteikts 400px platums, faktiskais lapas atveidotais platums būs 440px. Tas ņem vērā ne tikai 400 pikseļu platumu, bet arī kreisās puses 20 pikseļu un labās puses 20 pikseļus (iepriekšējā piemērā definēts ar polsterējuma stenogrāfiju).

Tas notiek, lai uzturētu 400 pikseļu satura vietu, nevis 400 pikseļus no kopējā elementa platuma. To demonstrē pildspalva:

Pārbaudiet šo pildspalvu!

Tas notiek visās lietojamās pārlūkprogrammās standarta režīmā, taču tas nenotiks IE6 un IE7 savādības režīmā (tas ir, IE6 vai IE7 parādītajās lapās, kur nav deklarēta doctype vai notiek kaut kas cits, lai aktivizētu dīvainības) režīmā).

Lai atrisinātu šo problēmu, tādējādi saglabājot platumu 400 pikseļi neatkarīgi no polsterējuma apjoma, varat izmantot box-sizingīpašumu:

.box ( padding: 20px; width: 400px; box-sizing: border-box; )

Tas liek elementam saglabāt platumu, vienlaikus palielinot polsterējumu, tādējādi samazinot pieejamo satura vietu. Lūk, demonstrācija:

Pārbaudiet šo pildspalvu!

Pārlūka atbalsts

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Jā	Jā	Jā	Jā	Jā	Jā	Jā