Սեղմած CSS պանդինգի կարճ նկարագիրը

CSS- ն լցնում է CSS- ի տուփի մոդելի հատկություններից մեկը: Այս ստանդարտի հատկությունը սահմանում է HTML տարրի բոլոր չորս կողմերի պնակները: CSS padding- ը կարող է կիրառվել գրեթե յուրաքանչյուր HTML պիտակի վրա (բացառությամբ սեղանի պիտակների որոշ): Բացի այդ, տարրերի բոլոր չորս կողմերը կարող են ունենալ այլ արժեք:

CSS- ի լրացուցիչ հատկություն

Օգտագործման ստեղնաշարով CSS- ի լիցքավորման հատկությունը, դուք կարող եք օգտագործել mnemonic "TRouBLe" (կամ "TRiBbLe" ձեզ համար Star Trek երկրպագուների համար): Սա կանգնած է վերին , աջից , ներքեւից եւ ձախից , եւ դա վերաբերում է ստեղնաշարի գույքում տեղադրված լցված լայնությունների կարգին: Օրինակ:

padding: վերեւի աջ ներքեւի ձախ; padding: 1px 2px 3px 6px;

Եթե ​​օգտագործեք վերը թվարկված արժեքները, այն կիրառելու է այլ լրացուցիչ արժեք `այն HTML- ի ցանկացած տարրի համար, որն այն կիրառում եք: Եթե ​​ցանկանում եք կիրառել նույն լրտեսությունը բոլոր չորս կողմերին, կարող եք հեշտացնել ձեր CSS- ը եւ ուղղեք մեկ արժեք:

padding: 12px;

CSS- ի այդ գծով, 12 պիքսել լցակույտը կիրառելի է տարրերի բոլոր 4 կողմերին:

Եթե ​​ցանկանում եք, որ լիցքավորումը լինի նույնը վերեւի եւ ներքեւի, ձախ եւ աջի համար, կարող եք գրել երկու արժեք.

padding: 24px 48px;

Առաջին արժեքը (24px) կիրառվում է վերեւում եւ ներքեւում, իսկ երկրորդը կիրառվում է ձախ եւ աջ:

Եթե ​​գրեք երեք արժեք, դա հորիզոնական լիցք (ձախ եւ աջ) նույնն է, իսկ վերին եւ ստորին փոխելը.

padding: վերեւի աջ եւ ձախ ներքեւ; padding: 0px 1px 3px;

Ըստ CSS- ի տուփի մոդելի, լցնումն առավելագույնն է տարրը / բովանդակությունը: Սա նշանակում է, որ լցնում ավելացվում է բովանդակության լայնության կամ բարձրության եւ օգտագործած ցանկացած սահմանային արժեքի միջեւ տարր: Եթե ​​լիցքավորումը զրոյական է, ապա այն նույն եզրին է, ինչպես բովանդակությունը:

CSS պաստառի արժեքները

CSS- ի լիցքավորումը կարող է ցանկացած ոչ բացասական երկարության արժեք: Համոզվեք, որ չափման չափորոշիչները, ինչպիսիք են px կամ em: Կարող եք նաեւ նշել ձեր padding- ի տոկոսը, որը լինելու է տարրի պարունակող բլոկի լայնությունը: Սա ներառում է վերին եւ ստորին լցնում: Օրինակ:

# կոնտեյներ {լայնություն `800px; բարձրությունը `200px; } #container p {լայնությունը `400px; բարձրությունը `75%; padding: 25% 0; }

# Պարունակության պարունակության բարձրությունը կկազմի # կոնտեյների բարձրության 75% -ը, գումարած 25% -ը, վերին լիցքավորման համար, իսկ ներքեւի լցվածքի 25% լայնությունը: Սա 300 + 200 + 200 = 700px է:

CSS- ի լրացնելու հետեւանքները

Բլոկ-մակարդակային տարրերի վրա լիցքավորումը կիրառվում է չորս կողմերում: Քանի որ տարրը հանդիսանում է բլոկ կամ տուփ, արդեն լիցքավորումը կիրառվում է տուփի կողմերին:

Երբ CSS- ի լցոնումը ավելացվում է գծային տարրերի վրա , հնարավոր է, որ գծային տարրի վերեւից եւ ստորին մասերից վերը նշված տարրերը համընկնեն, եթե ուղղահայաց լիցքագիծը գերազանցի գծի բարձրությունը, բայց այն չի գցում գծի բարձրությունը: Դրսի տարրերի նկատմամբ կիրառվող հորիզոնական CSS պնակները կավելացվեն տարրի սկիզբը եւ տարրի վերջը: Իսկ լիցքավորումը կարող է փաթաթել գծերը: Սակայն դա չի տարածվում բազմակի գծի բոլոր տողերի վրա, այնպես որ դուք չեք կարող օգտագործել լիցքաթափումը `բազմամետրային ներդիրի բովանդակության հատվածի անջատման համար:

Բացի այդ, CSS2.1-ում դուք չեք կարող ստեղծել բեռնարկղային բլոկներ, որտեղ լայնությունը կախված է լայնությունների (կամ padding widths) տոկոսների հետ տարրից: Եթե ​​դուք կատարում եք արդյունքը, անճանաչելի է: Բրաուզերները դեռ կցուցադրեն բովանդակությունը, բայց դուք չեք կարող ստանալ արդյունքներ, որոնք ակնկալում եք: Եթե ​​դուք մտածում եք դրա մասին, ապա դա իմաստ է, քանի որ ձեր կոնտեյների տարրը պետք է իմանա իր երեխայի տարրերի լայնությունը, որպեսզի այն սահմանի իր լայնությունը, օրինակ, երբ այն չունի նախապես սահմանված լայնություն, եւ մեկ կամ ավելի մի լայնություն, որը սահմանվում է որպես կոնտեյներային տարրի տոկոս, այսինքն, ոչ մի պատասխան չստեղծող շրջանաձեւ շղթա: Եթե ​​դուք օգտագործում եք ձեր փաստաթղթում որեւէ բան ընդգրկելու համար տոկոսներ, ապա դուք պետք է համոզվեք, որ ծնողի տարրերի լայնությունը նույնպես սահմանվում է: