HTML5 - užpildymas

The paminkštinimas HTML tai leidžia mums sukurti tarpą tarp turinio ir dėžutės, kurioje jie yra, kraštų, tokiu būdu galime suteikti elementui oro ir pasiekti įdomių grafinių efektų.

• Pamušalas: Inicijuojamas viršutinio krašto paminkštinimas, jo matavimai išreiškiami ilgiu arba procentais.
• Pamušalas dešinėje: Inicijuoja dešiniojo krašto paminkštinimą, jo matavimai išreiškiami ilgiu arba procentais.
• Apatinis pamušalas: Inicijuojamas apatinio krašto paminkštinimas, jo matavimai išreiškiami ilgiu arba procentais.
• Pamušalas kairėje: Inicijuojamas kairiojo krašto paminkštinimas, jo matavimai išreiškiami ilgiu arba procentais.
• Paminkštinimas: Šis spartusis klavišas padeda mums inicijuoti paminkštinimą su visomis ribomis vienoje eilutėje.

Kai ką svarbaus turime apriboti, kai inicijuojame a paminkštinimas Naudojant procentinius matavimus, šis procentas bus imamas tik atsižvelgiant į elemento plotį, o ne į aukštį.
Dabar pažiūrėkime su paprastu kodu, kaip pritaikyti a paminkštinimas mūsų HTML5 dokumente.

 Pavyzdys
Yra daug įvairių vaisių - vien tik bananų yra daugiau nei 500 veislių. Kai pridėsime daugybę obuolių, apelsinų ir kitų gerai žinomų vaisių rūšių, susidursime su tūkstančiais pasirinkimų.

Kaip matome iš šio kodo, galime pabrėžti gana įdomių dalykų, jei atidžiai pažvelgsime, mes jau pritaikėme kitus stilius elementui, kuriam mes užpildome, ir tai yra, mes galime sumaišyti su kitais elementais, kad gautume rezultatą. taip pat matome, kad naudojame matavimo vienetą em vietoj pxNors abu yra suderinami, kyla klausimas, ar galime pamatyti jų universalumą; pagaliau pažiūrėkime, kaip tai atrodo mūsų naršyklėje:

Dabar pažiūrėkime, kaip pritaikyti nuorodą mūsų inicijavimui paminkštinimas vienoje eilutėje paminkštinimo matavimų tvarka yra tokia: aukštyn, dešinėn, žemyn, kairėn; Be to, kai mes praleidžiame reikšmes, kita vertė yra koreguojama prie nepraleistos, pavyzdžiui, jei praleidžiame kairę, ji ima dešinės reikšmę, jei praleidžiame apatinę, ji ima vertę viršutinės dalies, jei įdėsime tik vieną vertę, keturios pusės turės tą pačią vertę.
Visą šią teoriją demonstruosime praktikos kodeksu, pažiūrėkime, kaip mes labai paprastai įgyvendiname užpildymą vienoje eilutėje.

 Pavyzdys
Yra daug įvairių vaisių - vien tik bananų yra daugiau nei 500 veislių. Kai pridėsime daugybę obuolių, apelsinų ir kitų gerai žinomų vaisių rūšių, susidursime su tūkstančiais pasirinkimų.

Kaip matome, užpildymo deklaracija labai nesikeičia ir sutaupome kelias eilutes, pažiūrėkime, kaip ji atrodytų naršyklėje:

Šiame elemente mes sukuriame jį su gana netaisyklingu rėmeliu, jei nebūtume taikę užpildo, kraštas būtų perėmęs tekstą, atlikęs pakeitimą ir patikrindamas naršykles, kad pamatytumėte skirtumą.
Baigę savo HTML5 užpildymo pamoką, dabar galime sukurti tarpus tarp elementų, kuriuose yra mūsų turinys HTML dokumente, ir mums belieka praktikuoti tol, kol neįsisavinsime to, ko išmokome šioje pamokoje.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką