CSS polsterējums ir viens no CSS kastes modeļa īpašībām. Šis sfotogrāfijas īpašums nosaka polsterējumu ap visām četrām HTML elementa pusēm. CSS polsterējumu var izmantot gandrīz katram HTML tagam (izņemot dažus tabulas tagus). Turklāt visām četrām elementa pusēm var būt atšķirīga vērtība.
CSS stiprināšanas īpašums
Lai izmantotu stenogrāfijas CSS polsterējuma īpašumu, jūs varat izmantot mnemonisko "TRouBLe" (vai "TRiBbLe" jūsu Star Trek faniem). Tas nozīmē augšējo , labo , apakšējo un kreiso pusi , un tas attiecas uz polsterējuma platumu secību, kuru esat iestatījis stentajā īpašumā. Piemēram:
polsterējums: augšējā labajā apakšējā kreisajā pusē; polsterējums: 1px 2px 3px 6px;Ja izmantojāt vērtības, kas uzskaitītas iepriekš, tam būtu jāpiemēro atšķirīga iesaiņojuma vērtība jebkuram HTML elementam, uz kuru jūs to piesakāties. Ja vēlaties izmantot vienu un to pašu polsterējumu visām četrām pusēm, varat vienkāršot CSS un vienkārši uzrakstīt vienu vērtību:
polsterējums: 12 pikseļi;Ar šo CSS rindiņu 12 elementu polsterējumu piemēro visām četrām elementa pusēm.
Ja vēlaties, lai polsterējums būtu vienāds attiecībā uz augšējo un apakšējo un kreiso un labo pusi, varat rakstīt divas vērtības:
polsterējums: 24 pikseļi 48 pikseļi;Pirmā vērtība (24 pikseļi) attiecas uz augšējo un apakšējo, bet otrā - uz kreiso un labo.
Ja jūs rakstāt trīs vērtības, tas padarīs horizontālo polsteri (pa kreisi un pa labi) vienādu, mainot augšējo un apakšējo:
polsterējums: augšējā labā un kreisā apakšdaļa; polsterējums: 0px 1px 3px;Saskaņā ar CSS kastes modeli, polsterējums ir vistuvāk pašam elementam / saturam. Tas nozīmē, ka polsteris tiek pievienots elementam starp satura platumu vai augstumu un visām izmantotajām robežvērtībām. Ja polsterējums ir iestatīts uz nulli, tam ir tāda pati robeža kā saturam.
CSS aplokšņu vērtības
CSS polsterējums var ņemt jebkuru ne-negatīvu garuma vērtību. Noteikti norādiet mērījumus, piemēram, px vai em. Jūs varat arī norādīt savu polsterējuma procentuālo daļu, kas ir procentuālā daļa no bloka saturošā elementa platuma. Tas attiecas uz augšējo un apakšējo polsterējumu. Piemēram:
#container {width: 800px; augstums: 200 pikseļi; } #container p (platums: 400 pikseļi; augstums: 75%; polsterējums: 25% 0; }Parametra #container elementa augstums būs 75% no #container augstuma plus 25% no platuma augšējā polsterējuma un 25% no apakšas polsterējuma platuma. Šis kopējais skaits ir 300 + 200 + 200 = 700 pikseļi.
CSS papildināšanas papildinājumu ietekme
Bloku līmeņa elementiem polsterējums tiek uzlikts uz četrām pusēm. Tā kā elements jau ir bloks vai kaste, polsterējums tiek piemērots lodziņu malām.
Kad CSS polsterējums tiek pievienots inline elementiem , var būt daži elementu pārklāšanās virs un zem iekšējā elementa, ja vertikālā polsterējums pārsniedz līnijas augstumu, bet tas neuzspiež līnijas augstumu uz leju. Elementa sākumam un elementa beigām tiks pievienots horizontāls CSS polsterējums, kas tiek izmantots elementu elementiem. Un polsterējums var ietīt līnijas. Bet tas neattieksies uz visām līnijām no daudzrindu elementiem, tādēļ jūs nevarat izmantot polsterējumu, lai ievilktu daudzrindu ievadītā satura segmentu.
Tāpat CSS2.1 ietvaros jūs nevarat izveidot konteineru blokus, kuru platums ir atkarīgs no elementa ar platuma procentuālo daļu (vai polsterējuma platumu). Ja jūs rezultāts ir nenoteikts. Pārlūkprogrammas joprojām rādīs saturu, taču jūs nevarēsiet iegūt rezultātus, ko jūs gaidāt. Ja jūs par to domājat, tas ir jēga, it kā jūsu konteinera elementam ir jāzina sava bērna elementu platums, lai noteiktu tā platumu, piemēram, kad tam nav iepriekš definēta platuma, un viens vai vairāki ir platums, kas iestatīts kā konteinera elementa procentuālā daļa, tas izveido apļveida ķēdi bez atbildes. Ja jūs savā dokumentā izmantojat visu teksta platumu procentus, jums jāpārliecinās, ka ir definēti arī vecāka elementa platumi.