CSS polsterējums ir viena no CSS kastes modelis. Šis stenogrāfijas rekvizīts iestata polsterējumu ap visām četrām HTML elementa malām. CSS polsterējumu var pielietot gandrīz katram HTML tags (izņemot dažus tabulas tagus). Turklāt visām četrām elementa malām var būt atšķirīga vērtība.
CSS polsterējuma īpašums
Lai izmantotu stenogrammu CSS polsterējuma rekvizītu, varat izmantot mnemonisks “TRouBLe” (vai “TRiBbLe”, kas paredzēts Star Trek faniem). Tas nozīmē tops, pa labi, apakšā, un pa kreisi, un tas attiecas uz polsterēšanas platumu secību, kuru iestatījāt stenogrāfijas īpašumā. Piemēram:
polsterējums: augšējā labajā apakšējā kreisajā pusē;
polsterējums: 1 pikseļi 2 pikseļi 3 pikseļi 6 pikseļi;
Ja izmantojat iepriekš uzskaitītās vērtības, tā lietos atšķirīgu polsterējuma vērtību katrai HTML elementa malai, kurai to lietojat. Ja vēlaties visām četrām pusēm uzlikt vienu un to pašu polsterējumu, varat to vienkāršot CSS un vienkārši uzrakstiet vienu vērtību:
polsterējums: 12 pikseļi;
Izmantojot šo CSS līniju, visām 4 elementa malām būtu jāpiemēro 12 pikseļu polsterējums.
Ja vēlaties, lai polsterējums būtu vienāds gan augšpusē, gan apakšā, gan kreisajā un labajā pusē, varat ierakstīt divas vērtības:
polsterējums: 24 pikseļi 48 pikseļi;
Pirmā vērtība (24 pikseļi) attieksies uz augšu un apakšu, bet otrā - pa kreisi un pa labi.
Ja rakstāt trīs vērtības, horizontālais polsterējums (pa kreisi un pa labi) būs vienāds, mainot augšējo un apakšējo daļu:
polsterējums: augšējais labais un kreisais apakšējais;
polsterējums: 0px 1px 3px;
Saskaņā ar CSS kastes modeli polsterējums ir vistuvāk pašam elementam / saturam. Tas nozīmē, ka elementam starp satura platumu vai augstumu un visām izmantotajām apmales vērtībām tiek pievienots polsterējums. Ja polsterējums ir iestatīts uz nulli, tam ir tāda pati mala kā saturam.
CSS polsterējuma vērtības
CSS polsterējumam var būt jebkura garuma vērtība, kas nav negatīva. Noteikti norādiet mērījumu, piemēram, px vai em. Varat arī norādīt polsterējuma procentuālo daļu, kas būs elementa bloka platuma procentuālā daļa. Tas ietver augšējo un apakšējo polsterējumu. Piemēram:
#container {width: 800px; augstums: 200 pikseļi; }
#container p {width: 400px; augstums: 75%; polsterējums: 25% 0; }
The augstums punkta iekšpusē # konteiners elements būs 75% no # konteinersAugstums plus 25% no platuma augšējam polsterējumam un 25% no platuma apakšējam polsterējumam. Tas kopā ir 300 + 200 + 200 = 700 pikseļi.
CSS polsterējuma pievienošanas ietekme
Ieslēgts bloka līmeņa elementi, polsterējums tiek uzklāts uz četrām pusēm. Tā kā elements jau ir bloks vai lodziņš, polsterējums tiek piemērots kastes sāniem.
Kad CSS polsterējums tiek pievienots inline elementi, var būt daži elementu pārklāšanās virs un zem iekšējā elementa, ja vertikālais polsterējums pārsniedz līnijas augstumu, taču tas netiks virzīts uz leju. Horizontālais CSS polsterējums, kas piemērots līnijas elementiem, tiks pievienots elementa sākumam un elementa beigām. Un polsterējums var ietīt līnijas. Bet tas neattieksies uz visām vairākrindu elementa rindām, tāpēc jūs nevarat izmantot polsterējumu, lai ievilktu vairākrindu iekšējā satura segmentu.
Tāpat CSS2.1 nevar izveidot konteineru blokus, kur platums ir atkarīgs no elementa ar platuma (vai polsterējuma platuma) procentuālo daļu. Ja jūs to darāt, rezultāts nav noteikts. Pārlūkprogrammās joprojām tiks rādīts saturs, taču jūs, iespējams, nesaņemsit gaidītos rezultātus. Ja jūs par to domājat, ir jēga, it kā jūsu konteinera elementam būtu jāzina tā pakārtoto elementu platums, lai noteiktu tā platumu, piemēram, ja tam nav iepriekš noteikta platuma un vienam vai vairākiem platums ir iestatīts procentos no konteinera elementa, tas izveido apļveida ķēdi bez atbildi. Ja dokumenta platumiem izmantojat procentus, jums jāpārliecinās, vai ir definēti arī vecāka elementa platumi.