Polsterdus CSS-trikid

paddingVara CSS määrab sisemine osa kasti mudel, luues ruumi ümber elemendi sisu, sees kõigist määratletud varud ja / või piiride.

Täiteväärtused määratakse pikkuse või protsendi järgi ja need ei saa negatiivseid väärtusi aktsepteerida. Kõigi polsterdusomaduste algne või vaikeväärtus on 0.

Siin on lihtne näide:

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

Ülaltoodud näites kasutatakse paddingkiiret atribuuti, mis aktsepteerib kuni nelja siin näidatud väärtust:

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

Kui määratakse vähem kui neli väärtust, võetakse puuduvad väärtused määratletud väärtuste põhjal. Näiteks saavad järgmised kaks reeglistikku identsed tulemused:

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

Seega, kui on määratletud ainult üks väärtus, määrab see kõik neli polsterduse omadust samale väärtusele:

.box ( padding: 20px; )

Kui deklareeritakse kolm väärtust, siis on padding: (top) (left-and-right) (bottom);.

Kõiki üksikuid polsterdamisomadusi saab deklareerida pikakäelise abil. Sel juhul määratleksite atribuudi kohta ainult ühe väärtuse. Nii et eelmise näite võiks ümber kirjutada järgmiselt:

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

Polsterduse ja elemendi laiuse arvutused

Kui elemendil on määratud laius, lisatakse sellele elemendile lisatud polsterduse kogu elemendi laiusele. See on sageli ebasoovitav tulemus, kuna see nõuab elemendi laiuse ümberarvutamist iga kord, kui polsterdust reguleeritakse. (Pange tähele, et see juhtub ka kõrgusega, kuid enamikul juhtudel eelistatakse mitte anda elemendile määratud kõrgust.)

Näiteks:

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

Selles näites on .boxelemendi selgesõnaline laius 400 pikslit , kuid lehe elemendi tegelik renderdatud laius on 440 pikslit. See võtab arvesse mitte ainult 400px laiust, vaid ka 20px vasakpoolset polsterdust ja 20px paremat polsterdust (eelmises näites määratletud polsterduse lühenemisega).

See juhtub selleks, et säilitada 400px sisuruumi, mitte 400px kogu elemendi laiusest. Siin on seda näitav pliiats:

Vaadake seda pliiatsit!

See juhtub kõigis kasutatavates brauserites standardrežiimis, kuid seda ei juhtu IE6 ja IE7 quirks-režiimis (st IE6-s või IE7-s kuvatavatel lehtedel, kus deklareerimata pole diktüüpi või kus toimub midagi muud, mis käivitab veidrusi režiimis).

Selle probleemi lahendamiseks, hoides seega laiust 400 pikslit, olenemata polsterduse suurusest, võite kasutada box-sizingatribuuti:

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

See põhjustab elemendi laiuse säilitamist, täites samal ajal ka siseruumi. Siin on demonstratsioon:

Vaadake seda pliiatsit!

Brauseri tugi

Chrome	Safari	Firefox	Ooper	IE	Android	iOS
Jah	Jah	Jah	Jah	Jah	Jah	Jah