paddingHotel v CSS definira najgloblje del modela polje, ki ustvarja prostor okrog vsebine element je, znotraj katere od opredeljenih meja in / ali meja.
Vrednosti oblazinjenja so nastavljene z uporabo dolžin ali odstotkov in ne morejo sprejeti negativnih vrednosti. Začetna ali privzeta vrednost za vse lastnosti oblazinjenja je 0.
Tu je preprost primer:
.box ( padding: 0 1.5em 0 1.5em; )Zgornji primer je uporaba paddingokrajšave, ki sprejema do štiri vrednosti, prikazane tukaj:
.box ( padding: || || || )Če je nastavljenih manj kot štiri vrednosti, se domnevajo, da manjkajoče vrednosti temeljijo na opredeljenih. Na primer, naslednja dva nabora pravil bi dobila enake rezultate:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Če je torej definirana samo ena vrednost, to nastavi vse štiri lastnosti oblazinjenja na isto vrednost:
.box ( padding: 20px; )Če so navedene tri vrednosti, je padding: (top) (left-and-right) (bottom);.
Katero koli posamezno lastnost oblazinjenja je mogoče prijaviti z uporabo dolgoročnega zapisa, v tem primeru bi določili samo eno vrednost na lastnost. Torej bi prejšnji primer lahko prepisali takole:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Izračun oblazinjenja in širine elementa
Če ima element določeno širino, bo vsako oblazinjenje, dodano temu elementu, dodalo celotni širini elementa. To je pogosto nezaželen rezultat, saj zahteva ponovno izračun širine elementa vsakič, ko se prilagodi oblazinjenje. (Upoštevajte, da se to zgodi tudi z višino, vendar je v večini primerov zaželeno, da elementu ne dodelite nastavljene višine.)
Na primer:
.box ( padding: 20px; width: 400px; )V tem primeru, čeprav je .boxelementu dana eksplicitna širina 400 slikovnih pik, bo dejanska upodobljena širina elementa na strani 440 slikovnih pik. Pri tem se upošteva ne samo širina 400 slikovnih pik, temveč tudi 20 slikovnih pik levega in 20 slikovnih pik desnega oblazinjenja (v prejšnjem primeru je to določeno z okrajšavo oblazinjenja).
To se zgodi, da se ohrani 400px prostora vsebine in ne 400px celotne širine elementa. Tukaj je pisalo, ki to dokazuje:
To se zgodi v vseh brskalnikih, ki se uporabljajo, v standardnem načinu, v IE6 in IE7 pa v quirks načinu (to je na straneh, prikazanih v IE6 ali IE7, kjer ni prijavljenega doktorskega tipa ali kjer se kaj drugega dogaja, da bi sprožile quirks). način).
Če želite odpraviti to težavo in tako ohraniti širino 400 px, ne glede na količino oblazinjenja, lahko uporabite box-sizinglastnost:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )To povzroči, da element ohrani svojo širino, hkrati pa poveča oblazinjenje in s tem zmanjša razpoložljivi prostor vsebine. Tu je predstavitev:
Podpora za brskalnik
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | Ja | Ja | Ja | Ja |