Պիտակը վերևի կենտրոնում ավելացնում է լցոն: Փոխեք ներդիրը և վերևի տարածությունը CSS-ում

Ողջույն Սկզբում ես ուզում էի այս հոդվածը բաժանել 4 փոքր հոդվածների, բայց հետո մտածեցի դրա մասին: Ինչի՞ համար։ Ի վերջո, ավելի հարմար է, երբ նման տեղեկատվությունը հավաքվում է մեկ նյութի շրջանակներում։

Այսպիսով, այսօր մենք կսովորենք, թե ինչպես դա անել CSS նահանջձախ կողմում և մյուս բոլոր կողմերից `աջ, վերևում և ներքևում: Նրանք կարող են պատրաստվել նկարների և տեքստերի համար: Նրանք գալիս են երկու տեսակի.

• Արտաքին;
• Ներքին.

Առաջինի համար հիմնական հատկությունը մարժա է, երկրորդի համար՝ padding: Պարզության համար ես ձեզ համար մի փոքրիկ օրինակ բերեցի: Որպեսզի տեսողականորեն հարմար լինի տարբերակել ներքին և արտաքին տարածությունը, ես ավելացրեցի տեսանելի աղյուսակ: Տեսնենք, թե ինչ է եղել.

Լուսանցքներ

Գրելով դրանք CSS ոճի ֆայլում՝ կարող եք էջի վրա սահմանել տեղեկատվական բլոկի կողմնորոշումը։ Օրինակ, ես այն կտեղափոխեմ ձախ և վար: Թույլ տվեք անմիջապես ցույց տալ, թե դա ինչ տեսք կունենա։

Ընդհանուր առմամբ, դուք կարող եք օգտագործել հետևյալ ընտրանքները՝ նահանջներ սահմանելու համար.

Ձախ (լուսանցք-ձախ):

Աջ կողմում (լուսանցք-աջ):

Վերև (լուսանցք-վերև):

Ներքև (լուսանցք-ներքև):

Այժմ ես ձեզ ցույց կտամ ևս մեկ հիանալի նրբերանգ:

Ինչպես տեսնում եք, կարող եք օգտագործել տարբերակներից մեկը՝ էֆեկտը նույնն է: Միայն երկրորդ դեպքում կոդը ավելի կոմպակտ է ստացվում։ Նկատի ունեցեք նաև, որ նահանջները դրված են ժամացույցի սլաքի ուղղությամբ: Ամեն ինչ սկսվում է վերևից և ավարտվում ձախից:

Լիցքավորում

Գործընթացը նման է այստեղ. Միայն հիմա ես կավելացնեմ նոր հատկություններ ոչ թե ամբողջ աղյուսակի, այլ սյունակների բովանդակության համար:

Տեսնենք, թե ինչ ստացվեց դրանից:

CSS-ում ներքին լուսանցքների անալոգիայի համաձայն՝ արտաքինները կարող են գրվել կրճատված կոդով կամ կողմերի համար առանձին։

Սրանք էին հիմնական կետերը։ Ի վերջո, ես ձեզ ցույց կտամ, թե այլ կերպ ինչպես կարող եք ավելի հեշտացնել որոշակի աշխատանք:

Ընտրված պիտակի մակարդակով նահանջ

Վերևում տեսած դեպքերում դրանք միևնույն ժամանակ նախատեսված են տեքստի և նկարների համար: Փաստորեն, դուք կարող եք սահմանել տարրերի հեռավորությունը որոշակի պիտակի մակարդակով: Ես ձեզ ցույց կտամ, թե ինչպես է այն աշխատում: Ես չեղարկում եմ վերջին փոփոխությունները և ոճային ֆայլում նշում եմ հատուկ կոդը։

Եկեք տեսնենք, թե ինչ է տեղի ունեցել փոփոխությունները պահպանելուց հետո:

Նկարը մնաց տեղում, միայն տեքստը տեղափոխվեց ձախ: Նմանատիպ մանիպուլյացիաները կարող են կիրառվել այլ բլոկների վրա, օրինակ, tr, span:

Ինչպես լրացուցիչ տեղեկություններԱռաջարկում եմ կարդալ առաջադրանքի մասին հրապարակումը։ Կան նաև բավականաչափ նկարագրված հետաքրքիր ուղիներ. Կարող է օգտակար լինել տեքստում կարմիր գիծ ձևավորելու կամ այլ գործողություններ կատարելու համար:

Բացի այդ, դուք կարող եք բաժանորդագրվել անվճար տեղեկագրին էլփոստի հասցեները. Բլոգին բաժանորդագրվելու համար կա հատուկ ձև: Կհանդիպենք ավելի ուշ:

Վեբ ռեսուրսը գնահատվում է օգտվողների կողմից՝ ելնելով իր տեսողական գրավչությունից: Հետևաբար, նույնիսկ տեղեկատվական օգտակար տեքստը կարող է չընթերցվել այն պատճառով, որ այն վատ է մշակված: Եզրակացություն - դուք պետք է ուշադիր և ուշադիր մոտենաք ոչ միայն կայքի էջերի իմաստային բովանդակությանը, այլև դրա տեսողական ներկայացմանը: CSS տեխնոլոգիայի հայտնվելը ընդլայնել է գրավիչ հոդվածներ ստեղծելու հնարավորությունները։ Հատկություններից մեկը, որը նախատեսված է գրելը ավելի հեշտ կարդալու համար, CSS տեքստի նահանջն է:

Լուսանցքներ և լիցք. Ո՞րն է տարբերությունը:

Նախքան տեքստի ֆորմատավորումը սկսելը, դուք պետք է հասկանաք, թե որոնք են լուսանցքներն ու նահանջները: Չնայած այն հանգամանքին, որ նշագրման այս տարրերը որոշ դեպքերում օգտագործողին նույնն են թվում, դրանց միջև կան հիմնարար տարբերություններ.

• դաշտը նշված է սեփականության կողմից լիցք, նահանջ - մարժա;
• լուսանցքը որոշվում է բլոկի բովանդակության և սահմանի միջև եղած բացով, ներքևը՝ հարակից բլոկների սահմանների միջև.
• լուսանցքները կարող են կամ հաշվի չառնվել տարրի չափսերում (լայնություն և բարձրություն):

մարժա սեփականություն

Այսպիսով, CSS տեքստի հորիզոնական կամ ուղղահայաց ներդիրը սահմանելու համար օգտագործեք կոնստրուկցիան մարժա. Այս հատկությունը վերաբերում է պիտակին փաստաթղթի պարբերությունը սահմանելը. Ի շատ պարզ դեպքգրված է այսպես.

լուսանցք՝ 12px:

Այս տողը նշանակում է, որ տեքստի բլոկի (կամ ցանկացած այլ բլոկի) շուրջ բոլոր կողմերից կլինի 12 պիքսել անցք: Ընդմիջումը, օրինակ, երեք անգամ մեծացնելու համար պարզապես գրեք.

լուսանցք՝ 36px:

Բայց ինչ անել, եթե բլոկների միջև ընկած ժամանակահատվածը պետք է տարբեր լինի յուրաքանչյուր կողմում: Վեբ էջերի մշակողները օգտագործում են ձայնագրման մի քանի ձևեր.

1. լուսանցք՝ 11px 22px:
2. լուսանցք՝ 11px 22px 33px:
3. լուսանցք՝ 11px 22px 33px 44px:

Առաջին օրինակում բլոկի ներքևի և վերևի եզրերից 11 պիքսել կտեղավորվի, իսկ բլոկի կողերին՝ 22 պիքսել: Երկրորդ ձայնագրման ձևի համաձայն՝ բլոկի վերին եզրի և բովանդակության միջև կլինի 11 պիքսել, ներքևի միջև՝ 33, իսկ կողքերին՝ 22 պիքսել: Երրորդ դեպքում լիցքը կլինի 11 պիքսել վերևում, 22 պիքսել աջ կողմում, 33 պիքսել ներքևում և 44 պիքսել ձախ կողմում:

Հնարավոր է նաև գրանցել հեռավորությունը մինչև բլոկի սահմանը միայն մի կողմից. լուսանցք-վերև, լուսանցք-ներքև, լուսանցք-ձախ, լուսանցք-աջ. Անշարժ գույքի անունները ռուսերեն թարգմանելով՝ հեշտ է կռահել դրանց նպատակը։ Օրինակ, հետևյալ գրառումն ասում է, որ աջ լուսանցքը կլինի 22 պիքսել.

լուսանցք-աջ՝ 22px:

Մյուս կողմերի համար բլոկի շուրջ հեռավորությունները ենթադրվում են, որ հավասար են մայր տարրի արժեքին:

Սեփականություն մարժաունի մի առանձնահատկություն, որը մշակողը պետք է նկատի ունենա CSS տեքստի ուղղահայաց նահանջ օգտագործելիս: ընդմիջումներով հարևան տարրերոչ թե ամփոփված են, այլ միմյանց վրա դրված։ Օրինակ, թող բլոկներից մեկը ունենա լուսանցք-ներքև՝ 15px, իսկ ներքևում գտնվող դրան հարող բլոկը լուսանցք՝ 35px. Դպրոցական թվաբանությունը և ողջախոհությունը հուշում են, որ նրանց միջև ընդհանուր տարածությունը կլինի 50 պիքսել: Գործնականում դա այդպես չէ: Գույքի բարձր արժեք ունեցող բլոկ մարժա«կլանելու» է իր հարեւանին. Արդյունքում տարրերի միջև հեռավորությունը կկազմի 35 պիքսել:

«Կարմիր» գիծ

Փաստաթղթի կազմում տեքստի խմբագիր, օգտվողները նախընտրում են նշել յուրաքանչյուր նոր պարբերություն՝ օգտագործելով «կարմիր» գիծը: ՀԵՏ օգտագործելով CSSՁախ կողմում տեքստի ներքևումը հեշտ է անել. շինարարությունն օգտագործվում է տեքստ-նախագիծ. Գրված է այսպես.

տեքստային նահանջ՝ 11px:

Այսինքն՝ պարբերության առաջին տողը ձախ եզրին համեմատ կտեղափոխվի 11 պիքսելով։ Վեբ էջի տեքստը խմբագրում փաստաթղթի նման դարձնելու համար պետք է լրացուցիչ սահմանել, այսինքն՝ գրել.

տեքստային նահանջ՝ 11px;

տեքստի հավասարեցում. արդարացնել.

Բացի պիքսելներից, գծանշումները նկարագրելիս թույլատրվում է օգտագործել այլ միավորներ՝ դյույմ, միավոր, տոկոս: Թող բլոկը ունենա CSS տեքստային լիցք 10%: 500 պիքսել բլոկի լայնությամբ կարմիր գիծը կլինի 50 պիքսել (500-ի 10%-ը):

Այս հատկությունը կարող է սահմանվել ժառանգել. Այս գրառումը ասում է, որ բլոկը օգտագործում է մայր բլոկի նմանատիպ հատկությունը:

text-indent՝ ժառանգել.

Զարմանալիորեն, այն կարող է նաև բացասական արժեքներ ընդունել: Այս դեպքում ձևավորվում են այսպես կոչված վերելակներ, այսինքն՝ հիմնական տեքստը մնում է տեղում, իսկ առաջին տողը 22 պիքսելով տեղափոխվում է ձախ.

տեքստային նահանջ՝ -22px:

Որպեսզի տառերը դուրս չգան բրաուզերի ձախ եզրագծից, բացի տեքստ-նախագիծդաշտը սահմանելու համար անհրաժեշտ է օգտագործել կոնստրուկցիան՝

padding-ձախ՝ 22px:

CSS-ի հիմնական հատկությունները վերանայվում են: Իսկ պրակտիկան կօգնի դրանք համախմբել։ Ահա որոշ վերջնական խորհուրդներ՝ ձեր սովորածը ձեր կայքի մշակման մեջ կիրառելու համար.

• կարմիր գծի և տեքստի ներքևումը տարբեր հասկացություններ են, և դրանք նշելու համար օգտագործվում են տարբեր հատկություններ.
• Ուղղահայաց հատվածների համար մաթեմատիկայի կանոնները չեն կիրառվում. ընդմիջումները համընկնում են, ավելի մեծ արժեք ունեցող տարրը «հաղթում է».
• բացասական պարբերության նահանջօգտագործվում է պարբերության առաջին տողը պատկերի միջոցով նշելու համար:

Հատկությունը որոշում է, թե որքան հորիզոնական տեքստային տարածություն պետք է փաթաթվի տեքստային տարրի առաջին տողի մեկնարկից առաջ: Հեռավորությունը հաշվարկվում է տարրի մեկնարկային եզրից և բլոկի մակարդակի կոնտեյներով:

Քանի որ վեբ էջի բովանդակության մեծ մասը տեքստի տեսքով է, այդ տեքստը և՛ գրավիչ, և՛ արդյունավետ ձևավորելու ունակությունը կարևոր հմտություն է վեբ դիզայներ դառնալու համար: Նկարագրությունը և պարբերությունը մատնանշելու համար առավել հաճախ օգտագործվող և առաջարկվող մեթոդը կլինի օգտագործելով CSS. Այստեղ ձեզ կտրամադրվի տարբեր օրինակներայն մասին, թե ինչպես կարող է CSS-ն օգտագործվել տեքստի և ներքևի տարրի համար:

Սահմանեք վերին լուսանցքը՝ օգտագործելով CSS

Վերին հատվածներ ստեղծելու համար օգտագործվում է, ապա իհարկե առանց CSS հատկություններմենք չենք կարող դա անել, քանի որ մեզ անհրաժեշտ է margin-top, սա արժեք է, որը կարող է սահմանվել տարբեր ձևերով, օրինակ՝ px-ով և ստանդարտ՝ պիքսելներով, em, % և այլն, որպեսզի ամեն ինչ տեղի ունենա CSS ոճով միավորներով։ չափում։

Օգտագործման օրինակ.

Լուսանցք-բլոկ (
margin-top:50px;
}

Ինչ կարող եք տեսնել նկարում.

Այն կարող եք օգտագործել նաև բլոկներ գցելու համար, այստեղ կարող եք օգտագործել հատկությունը, որը կոչվում է լուսանցք-ձախՆաև լուսանցք-աջԵվ լուսանցք-ներքև. Այնտեղ, որտեղ մենք պարզապես նշում ենք լուսանցքի հատկությունը, որտեղ սկզբում հնարավոր է դրա համար սահմանել 4 պարամետր, այստեղ մենք կդիտարկենք ժամացույցի սլաքի ուղղությամբ այն հայեցակարգի համար, որտեղ մենք սկսում ենք վերևի կողմից՝ շարունակությունը յուրաքանչյուր կողմի տակ:

լուսանցք՝ 20px 50px 30px 50px;

CSS-ում կա նաև վերին լիցք

Պատահում է, որ դուք պետք է հարթեցնեք բովանդակության տարրը ուղղահայաց, սա հարաբերական է մայր բլոկի հետ, այստեղ հնարավոր է օգտագործել այլ հատկություններ, ինչպիսիք են padding-top-ը, որն անում է, ավելի ճիշտ, լռելյայնորեն դնում է ներքին լիցքավորումը դեպի վեր: Եթե ​​խոսենք նմանատիպ հատկությունների մասին, որոնք նույնպես կարելի է գրել և սահմանել անալոգային ձևով, ապա այստեղ մենք ունենք մարժան px, em, % և այլ միավորներով։

Օրինակ՝

Լիցք-բլոկ (
padding-top՝ 47px;
}

Այժմ մենք կարող ենք դիտարկել սեփականության անալոգը մարժաԵվ լիցք, որն օգտագործվում է բլոկի տարրի մյուս կողմերում նահանջներ սահմանելու համար, բայց արդեն գնում է առանձին. padding-ձախ, padding-աջ, լիցք-ներքև. Այնտեղ, որտեղ դուք կարող եք անմիջապես սահմանել ձեզ անհրաժեշտ հեռավորությունը, միայն բոլոր կողմերի համար, և ամեն ինչ կլինի միաժամանակ:

լիցք՝ 10px 20px 40px 50px;

Այստեղ դուք կարող եք սկզբում սահմանել արժեքը որպես համար մարժասկսած, ինչպես հասկանում եք վերևից, բայց հետո ամեն ինչ գնում է ժամացույցի սլաքի ուղղությամբ, սա աջ կողմում է, ներքևում, ձախում և այլն:

Հիմա կախված տարբեր իրավիճակներ, դուք հնարավորություն ունեք վերևի մասում նահանջելու CSS ոճեր, որտեղ մենք օգտագործում ենք հատկությունները մարժաԵվ լիցքոր ձեր ինտերնետային ռեսուրսի էջում հնարավոր է տեղադրել անհրաժեշտ տարրերը, ինչպես որ նախատեսել եք և պետք է անեք։

CSS դասավորությունը միշտ եղել է ուղղանկյուն: Ցանկացած հարթ գծեր մշակողի իրավասությունն են: Ոճի կանոնները բավականաչափ հնարավորություններ են տալիս էջին հարթ ձև հաղորդելու էկրանի լուծաչափի սահմաններում: Բայց դասավորության ցանկացած տարր միշտ ուղղանկյուն է, որտեղ տեղեկատվության դասավորությունը կարգավորվում է CSS կանոններով:

Ամբողջակողմանի լցոնումը կարևոր է յուրաքանչյուր էջի տարրի համար, երբ այն բացարձակապես տեղադրված է, և CSS-ի վերին լցոնումը հատուկ սահմանված է, քանի որ այն կարևոր է տարբեր տարրերի, հատկապես ներկառուցված տարրերի համար:

Տեղադրման հիմնական կանոնները

Բլոկի տարրն ունի իր պարունակած տարրի կողմերից ներքևման կանոն (լուսանցք), ներսի տարրերի համար ներքևման կանոն (լիցք) և եզրագծի լայնություն (սահման), որը նույնպես կարող է օգտագործվել։

Առանձնահատուկ կարևորություն ունի վերևի հատվածը: Բլոկի ներսում CSS-ը կապում է լրացման կանոնները այդ բլոկի ներսում բացարձակ և համեմատաբար տեղակայված տարրերի կանոնների հետ:

CSS կանոնների համար սովորական պրակտիկա. դուք կարող եք նշել լցոնումը բոլոր կողմերից հավասարապես, զույգերով վերև/ներքև և աջ/ձախ, կամ յուրաքանչյուր կողմի համար առանձին: Օրինակ՝

• լուսանցք՝ 10px;
• լիցք՝ 10px20px;
• լիցք՝ 10px20px30px40px:

Առաջին դեպքում դրված է տարրի խորացումը արտաքին տարայի կողմերից, որում այն ​​գտնվում է: Երկրորդ դեպքում վերևի և ներքևի եզրերը 10px են, ձախ և աջ կողմերը՝ 20px: Երրորդ դեպքում բոլոր կողմերից նշվում է անցքերի չափը՝ վերև, աջ, ներքև և ձախ։

Այս բոլոր դեպքերում ներքևը վերին CSS-ը 10 px է:

Կանոններ, որոնք փոխում են տարրերի դիրքը

Եթե ​​դասավորության տարրը բացարձակապես տեղադրված չէ, այն տեղադրվում է էջի ձևավորման ընդհանուր կարգով:

Եթե ​​սահմանենք «sCurrInfo» տարրի վերևի CSS-ի վրա լցնելով, նպատակը կհասնի, բայց եթե li մակարդակի վրա՝ ոչ:

Այս օրինակում օգտագործելով լիցքավորման կանոնը՝ 40px; պահանջում է լայնության և բարձրության կանոնների համարժեք կրճատում 80px-ով: IN հակառակ դեպքում scCurrInfo բլոկի չափը կգերազանցի արտաքին բլոկի սահմանները:

Եթե ​​մենք scCurrInfo նկարագրությունից հանենք լրացման կանոնը, բայց այն ավելացնենք 20px արժեքով ցուցակի տարրերի ոճի նկարագրության մեջ, մենք միայն կստանանք. վերին նահանջ. CSS-ը չի կիրառի այս արժեքը այլ կողմերի համար:

Բնականաբար, նահանջի կանոնի այս օգտագործումը վերաբերում է յուրաքանչյուր li տարրի վրա:

Բովանդակության ձևաչափման ընդհանուր պրակտիկա

Որոշ ծրագրավորողներ կատարելության են հասնում՝ էջեր դնելով՝ օգտագործելով բլոկային տարրեր: Ըստ երևույթին, սա դասական պրակտիկա է՝ սկսել աղյուսակներից և ավարտել սեփական ուսումնական գործընթացը բլոկներով։

Բլոկի դասավորությանը բնորոշ ազատությունը հետաքրքրաշարժ է, և մշակողի երևակայությունը չի կարող սահմանափակվել աղյուսակի խիստ կանոններով. միայն տողեր, միայն բջիջներ, որոնք միաձուլվում են միայն հորիզոնական և ուղղահայաց: Հարաբերական գաղափարներին հատուկ բան չկա:

Մինչդեռ սեղանները, բացի ակնհայտ թերություններից, ունեն բազմաթիվ որակական առավելություններ։ Վերևում լիցք ստեղծելիս CSS-ը հաշվի է առնում ձախ, աջ մասի լիցքը (ներքևում հատուկ կետ է): Սեղանի բջիջների կանոնները թույլ են տալիս վերահսկել ինչպես ուղղահայաց, այնպես էլ հորիզոնական հավասարեցումը: Օգտագործելով տողերի ոճերը և դրանք համատեղելով բջիջների ոճերի հետ՝ կարող եք ստեղծել բովանդակության բարդ տեսակետներ:

Էջի սովորական ներկայացումը ուղղանկյունների տեսքով ամենևին չի խանգարում, որ այն ներկայացվի աղյուսակի տեսքով։ Սրանք նույնպես ուղղանկյուններ են, բայց դրանք նաև աղյուսակային բջիջներ են, այսինքն՝ ունեն իրենց կանոնները, որոնք լրացնում են բլոկների կանոնները։

Բացարձակ դիրքավորում

Արգելափակել կանոնով ԴԻՐՔ՝ բացարձակ ; կտեղակայվի մի վայրում, որը որոշվում է իր կոորդինատներով այն բլոկի նկատմամբ, որտեղ այն գտնվում է:

CSS կանոնների բնորոշ առանձնահատկությունն այն է, որ «պրակտիկան ճշմարտության լավագույն չափանիշն է» շատ դեպքերում, հատկապես, երբ պահանջվում է բրաուզերի համատեղելիություն և դասավորությունը կատարվում է ձեռքով, նախընտրելի է կասկադային ոճի թերթիկների վրա լիարժեք ձեռնարկներ ուսումնասիրելը:

Աղյուսակների օգտագործումը հաճախ հանգեցնում է բջջային բովանդակության փոփոխության խնդիրների: Բլոկի ներսում նմանատիպ օֆսեթը միշտ չէ, որ ազդում է բոլոր տարրերի վրա: Փորձարկելով՝ կարող եք հասնել ցանկալի արդյունքի։ Չնչին խնդիր՝ ինչպես վերևի լցոնումը հեռացնելը միշտ չէ, որ աննշան լուծում է CSS-ի համար:

Որոշ դեպքերում, երբ դուք պետք է դասավորեք էջի տարրերը որոշ հայտնի կայքերի բովանդակության կառավարման համակարգի աղիքներում, դուք դեռ պետք է ուշադրություն դարձնեք ոչ միայն փորձարարական պրակտիկային, այլև ձեր գործընկերների փորձին:

Բլոկի դասավորությունը հաճախ օգտագործվում է կայք կամ բլոգ ստեղծելիս: Սրա հետևանքով հաճախ անհրաժեշտ է լինում բլոկների հետքագիծը: Այս պատճառով մոտ ինչպես կատարել նահանջ CSS-ումմանրամասն նկարագրված է այս դասում: Բրաուզերի համար յուրաքանչյուր պիտակ մի կոնտեյներ է, որն ունի բովանդակություն, լիցք, արտաքին լուսանցքներ և եզրագիծ: Այս դասում մենք կսովորենք, թե ինչպես կատարել ներքին և արտաքին նահանջներ և հաշվի առնել դրանց հիմնական պարամետրերը:

Ստորև բերված նկարը հստակ ցույց է տալիս բլոկի նահանջի պարամետրերը.

Ինչպես տեսնում եք, նահանջները կարող են կատարվել չորս ուղղություններով՝ վերևից (վերևում), ներքևի (ներքևից), ձախից (ձախից) և աջից (աջից): Չափման միավորները կարող են լինել պիքսելներ, տոկոսներ և այլ CSS միավորներ. ավելին իմանալ դրանց մասին: Այս ձեռնարկը օգտագործում է պիքսելներ:

Արգելափակման լիցք

CSS-ում լիցքավորման համար պատասխանատու գույքն է լիցք. Այսպիսով, եկեք դիտարկենք բլոկի համար լիցք դնելու օրինակ.

padding-top՝ 5px; /*վերին լիցք*/ padding-left՝ 8px; /*ձախ լիցք*/ padding-right՝ 8px; /*աջ padding*/ padding-bottom՝ 5px; /*ներքևի լցոնում*/

Այս օրինակում լիցքավորումը դրված է առանձին բլոկի յուրաքանչյուր կողմի համար: Բացի այդ, CSS-ում նահանջը սահմանելու մի քանի եղանակ կա.

լուսանցք՝ 5px 8px 5px 8px; /*վերև, աջ, ներքև, ձախ լուսանցքներ*/ լուսանցք՝ 5px 8px 5px; /*նկարագրում է վերին, ձախ, աջ, ներքևի լուսանցքները*/ լուսանցքը՝ 5px 8px; /*նկարագրում է վերևի և ներքևի, աջ և ձախ լուսանցքները*/ լուսանցք՝ 7px; /* նկարագրում է բոլոր 7px լցոնումները*/

Ավելի հեշտ է հիշել առաջին և վերջին մեթոդները: Առաջին դեպքում, նահանջները տեղադրվում են ժամացույցի սլաքի ուղղությամբ (վերևում, աջից, ներքևից, ձախից) - մենք կարող ենք նշել ցանկացած քանակությամբ ներքև, բոլոր կողմերից անցքերը նույնը կլինեն:

Արգելափակել լուսանցքները

CSS-ում մարժաների համար պատասխանատու գույքն է մարժա. CSS-ում լուսանցքների օրինակներ.

լուսանցք-վերև՝ 5px; /*վերևի լուսանցք*/ լուսանցք-ձախ՝ 10px; /*ձախ լուսանցք*/ լուսանցք-աջ՝ 10px; /*աջ լուսանցք*/ margin-bottom՝ 5px; /*ներքևի լուսանցք*/

լիցք՝ 5px 10px 5px 10px; /*վերև, աջ, ներքև, ձախ եզրեր*/ լիցք՝ 5px 10px 5px; /*նկարագրում է վերին, ձախ և աջ, ներքևի լցոնումը*/ լիցքավորումը՝ 5px 10px; /*նկարագրում է վերևից և ներքևից, աջից և ձախից*/ լիցքավորումը՝ 7px; /* նկարագրում է բոլոր 7px լուսանցքները*/

Այսպիսով, ինչպես կատարել նահանջ CSS-ում- Հարցը բարդ չէ, բայց շատ տեղին է։ Վերը նկարագրված տեղեկատվությունը ավելի լավ հասկանալու համար պետք է հիշել, որ կան երկու հատկություն՝ լիցք՝ ներքին ներքևեր և լուսանցք՝ արտաքին ներքևեր: Բացի այդ, ինչպես արդեն գիտեք, կան մի քանի եղանակներ՝ ներքևեր դնելու համար, կարող եք դրանք օգտագործել: