HTML-ում ներքևի կառավարում css-ի միջոցով: Սովորում ենք html-ում տեքստը նահանջել Ինչպես html-ի վերևից նահանջ անել

Բարի գալուստ իմ բլոգ: Css-ը (Cascading Style Sheets) տրամադրում է բազմաթիվ տարբերակներ՝ վեբ էջերի տեսքը հարմարեցնելու համար: Այսօր ես կցանկանայի համառոտ ցույց տալ, թե ինչպես կարելի է որոշել css նահանջվերևում կամ ցանկացած այլ կողմում ցանկացած տարրի համար:

Լուսանցք

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

Լուսանցքը որոշում է տարրի ընտրված եզրի հեռավորությունը էջի այլ տարրերից: Օրինակ՝ մուտքը.

P,div(
Լուսանցք-վերև՝ 20px;
}

Սա նշանակում է, որ բոլոր բլոկները և պարբերությունները վերևում կկտրվեն 20 պիքսելով, այսինքն՝ դրանց վերին եզրը այս հեռավորությամբ կտեղափոխվի իրեն հարող տարրերից։

Լուսանցքները կարող են գրվել յուրաքանչյուր կողմում՝ օգտագործելով միայն մեկ լուսանցքային հատկություն, որի վրա անընդմեջ գրված է 4 արժեք.

Դիվ (
Լուսանցք՝ 20px 10px 20px 10px;
}

Լիցքավորումը կտրվի համապատասխանաբար վերևից, աջից, ներքևից և ձախից: Քանի որ այս դեպքում նրանք հավասար են հակառակ կողմերին, կարող ենք գրել նաև այսպես.

Դիվ (
Լուսանցք՝ 20px 10px;
}

Առաջին արժեքը վերևում և ներքևում գտնվող լուսանցքն է, իսկ երկրորդը կողքերի լուսանցքն է:

Նեղացում

Ներքին լցոնումը տարբեր կերպ է աշխատում. այն չի հեռացնում բլոկը այլ տարրերից, այլ ավելացնում է այդ տարածությունը տարրի ներսում՝ բլոկի բովանդակությունը հեռացնելով դրա եզրերից: Հարմարավետ է։ Որտե՞ղ եք տեսել կայք, որտեղ տեքստը սկսվում է պատուհանի վերևի ձախ մասում:

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

Բացի այդ, լուսանցքի նման, կարող եք ավելացնել կողմի անունը և սահմանել հեռավորությունը միայն դրա համար: Օրինակ, վերին լցոնումը կարող է գրվել՝ օգտագործելով padding-top : Ընդհանուր առմամբ, padding հատկությունը աշխատում է ճիշտ այնպես, ինչպես margin հատկությունը:

Օրինակ, կարող եք տալ այս կոդը՝

Արգելափակել (
Լայնությունը՝ 200px;
Լիցք՝ 20px;
}

Ի՞նչ եք կարծում, որքա՞ն կլինի մեր տարրի իրական լայնությունը: Այստեղ դուք կարող եք տեսնել, որ այն 200 պիքսել է, բայց լիցքները յուրաքանչյուր կողմում ավելացնում են ևս 20-ը, ընդհանուր առմամբ 240 պիքսել: Հաշվի առեք դա նախագծելիս:

Կցանկանայի նաև նշել, որ լիցքավորումը սովորաբար տրվում է միայն բլոկ տարրերին, ավելի լավ է այն չտալ ներկառուցված տարրերին: Լուսանցքը լավ է աշխատում ցանկացած տարրերի հետ:

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

CSS լիցքավորման ընտրանքներ

Կասկադային ոճի թերթիկների օգնությամբ հնարավոր է սահմանել երկու տեսակի ներքև.

1.Նեղացումտարրի երևակայական սահմանից մինչև դրա բովանդակությունը հեռավորությունն է: Հեռավորության արժեքը նշվում է պարամետրի միջոցով լիցքավորում. Այս նահանջը պատկանում է հենց տարրին և գտնվում է դրա ներսում։

2. Լուսանցք— վեբ էջի ընթացիկ տարրի եզրագծի և հարևան տարրերի կամ մայր տարրի սահմանների միջև հեռավորությունը: Հեռավորության չափը վերահսկվում է սեփականության կողմից մարժա. Այս նահանջը գտնվում է տարրի սահմաններից դուրս:

Պարզության համար նկար.

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

Լրացում CSS-ում՝ օգտագործելով լիցք (վերև, ներքև, ձախ, աջ)

padding-left, padding-top, padding-right և padding-bottom ոճի հատկությունները թույլ են տալիս սահմանել padding-ի արժեքները, համապատասխանաբար, վեբ էջի տարրի ձախ, վերև, աջ և ներքևի մասում.

Նեղման չափը կարող է նշվել պիքսելներով (px), տոկոսով (%) կամ CSS-ի համար ընդունելի այլ միավորներով: Տոկոսները նշելիս արժեքը հաշվարկվում է տարրի լայնությունից: Ժառանգության արժեքը ցույց է տալիս, որ այն ժառանգվել է ծնողից:

Օրինակ, ընթացիկ պարբերության համար ես կիրառել եմ ոճի կանոն, որը սահմանում է ձախ լիցքը 20 պիքսել, վերևի լցոնը՝ 5 պիքսել, աջը՝ 35 պիքսել, իսկ ներքևի լիցքը՝ 10 պիքսել: Կանոնների մուտքագրումը կունենա հետևյալ տեսքը.

p.test(
padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-stop:10px
}

Կոմպոզիտային լիցքավորման կանոնթույլ է տալիս միանգամից նշել վեբ էջի տարրի բոլոր կողմերում նահանջները.

լիցք:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Prefab կանոնը թույլ է տալիս օգտագործել մեկ, երկու, երեք կամ չորս արժեքներ՝ բաժանված բացատով: Այս դեպքում ազդեցությունը կախված է արժեքների քանակից.

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

Այսպիսով CSS կանոնՎերը նշվածը կարելի է հնարավորինս կրճատել և գրել հետևյալ կերպ.

p.test (լիցքավորում՝ 5px 35px 10px 20px)

CSS-ում մարժայի հատկությունը կամ լուսանցքները

Margin-left, margin-top, margin-right և margin-bottom ոճի ատրիբուտները թույլ են տալիս սահմանել լուսանցքի արժեքները, համապատասխանաբար, ձախ, վերև, աջ և ներքև:

Ինչպես նշվեց վերևում, լուսանցքը ընթացիկ տարրի սահմանից մինչև հարակից տարրի սահմանն է, կամ, եթե չկան հարևան տարրեր, մինչև մայր կոնտեյների ներքին սահմանը:

Նեղման չափը կարող է նշվել պիքսելներով (px), տոկոսով (%) կամ CSS-ի համար թույլատրված այլ միավորներով.

p(
լուսանցք-ձախ՝ 20px;
}
h1(
margin-right:15%;
}

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

Թույլատրվում է օգտագործել որպես արտաքին ներդիրների արժեքներ բացասական արժեքներ:

p(
լուսանցք-ձախ:-20px;
}

Եթե դրական նահանջ արժեքներով հարակից տարրերտեղափոխվում են հեռու, այնուհետև բացասական արժեքով հարևան բլոկը կբախվի այն տարրի հետ, որի համար մենք սահմանել ենք նման բացասական օֆսեթ:

Մենք կարող ենք նաև նշել padding՝ օգտագործելով style հատկանիշը մարժա. Այն վեբ էջի տարրի բոլոր կողմերում միաժամանակ սահմանում է ներքևման արժեքները.

լուսանցք:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Մեկ, երկու, երեք կամ չորս լիցքավորման արժեքներ նշելիս այս հատկությունը ենթարկվում է նույն օրենքներին, ինչ լրացման կանոնը:

Սահմանային ընտրանքներ, օգտագործելով սահմանային հատկությունը

Շրջանակներ սահմանելիս կան երեք տեսակի պարամետրեր.

եզրագծի լայնությունը - եզրագծի հաստությունը;
սահման-գույն — եզրագծի գույն;
սահմանային ոճ - գծի տեսակը, որով գծվելու է շրջանակը:

Սկսենք շրջանակի հաստության պարամետրից.

եզրագծի լայնությունը՝ [արժեքը | բարակ | միջին | հաստ] (1,4) | ժառանգել

Շրջանակի հաստությունըկարող է նշվել պիքսելներով կամ CSS-ում առկա այլ միավորներով: Բարակ, միջին և հաստ փոփոխականները սահմանում են եզրագծի հաստությունը համապատասխանաբար 2, 4 և 6 պիքսել.

եզրագիծ-լայնություն:միջին;

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

եզրագծի լայնությունը՝ 5px 3px 5px 3px

Ընթացիկ պարբերության համար վերևի եզրագծի հաստությունը դարձրեք 1px, աջ 2px, ներքևի 3px և ձախ 4px՝ օգտագործելով կանոնը (սահմանի լայնությունը՝ 1px 2px 3px 4px;)

Օգտագործելով սահման-ձախ-լայնություն, եզր-վերև-լայնություն, եզր-աջ-լայնություն և եզր-ներքևի լայնություն ոճի հատկանիշները, կարող եք սահմանել եզրագծի ձախ, վերև, աջ և ներքևի կողմերի հաստությունը, համապատասխանաբար.

Հաջորդ պարամետրը սահմանի գույնն է, որով կարող եք վերահսկել շրջանակի գույնը:

եզրագույն՝ [գույն | թափանցիկ] (1,4) | ժառանգել

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

p (սահմանի լայնությունը՝ 2px; եզրագծի գույնը՝ կարմիր)

transparent սահմանում է թափանցիկ եզրագծի գույնը, իսկ ժառանգությունը ժառանգում է ծնողի արժեքը: Լռելյայնորեն, եթե եզրագծի գույնը նշված չէ, կօգտագործվի այն, որն օգտագործվում է տարրի ներսում գտնվող տառատեսակի համար:

Օգտագործելով սահման-ձախ-գույն, եզր-վերևի գույն, եզր-աջ-գույն և սահման-ներքևի գույնի ոճի ատրիբուտները, կարող եք սահմանել եզրագծի ձախ, վերև, աջ և ներքևի կողմերի գույնը, համապատասխանաբար.

Իսկ սահմանային ոճի վերջին պարամետրը սահմանում է շրջանակի տեսակը:

եզրային ոճ՝ (1,4) | ժառանգել

Շրջանակի տեսակը կարող է սահմանվել տարրի բոլոր կողմերի համար միանգամից կամ միայն նշվածների համար: Կարող են օգտագործվել մի քանի արժեքներ հիմնաբառեր. Արտաքին տեսքը կախված կլինի օգտագործվող բրաուզերից և շրջանակի հաստությունից: Իմաստը ոչ ոքօգտագործվում է լռելյայնորեն և չի ցուցադրում շրջանակ և դրա հաստությունը դրված է զրոյի: Թաքնված արժեքը նույն ազդեցությունն ունի: Ստացված շրջանակը այլ արժեքների համար, կախված հաստությունից, ներկայացված է ստորև բերված աղյուսակում.

Ոճի ատրիբուտները սահման-ձախ ոճ, եզրագիծ-վերև ոճ, եզրագիծ-աջ ոճ և եզրագիծ-ներքևի ոճը նշում են գծերի ոճը, որոնք գծվելու են եզրագծի ձախ, վերևի, աջ և ներքևի կողմերում, համապատասխանաբար:

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

սահման՝ | ժառանգել

Արժեքները կարող են լինել ցանկացած հերթականությամբ՝ բաժանված բացատներով.

td (սահման՝ 1px պինդ դեղին)

Տարրի միայն որոշակի կողմերում սահման դնելու համար կան սահման-վերև, եզր-ներքև, եզր-ձախ, սահման-աջ հատկություններ, որոնք թույլ են տալիս պարամետրեր սահմանել վերևի, ներքևի, ձախ և աջ կողմերի համար: շրջանակներ, համապատասխանաբար:

Մնում է միայն ամփոփել.

առաջադրանքի համար լիցքավորումմենք օգտագործում ենք գույքը լիցքավորում;
կարգավորումների համար լուսանցքներըկա մի կանոն մարժա;
շրջանակի պարամետրերնշված են հատկանիշի միջոցով սահման.

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

Այսքանը, կհանդիպենք հաջորդ անգամ:

Առաջադրանք

Հեռացրեք պարբերակներով կամ համարակալված ցուցակների ներդիրները:

Լուծում

UL կամ OL ընտրիչի համար օգտագործեք լուսանցք և լրացման ոճի հատկություն՝ զրոյական արժեքով, կախված ցանկի տեսակից, ինչպես ցույց է տրված Օրինակ 1-ում:

Օրինակ 1. Ցանկի նահանջ

HTML5 CSS 2.1 IE Cr Op Sa Fx

Ցանկի նահանջ

Չեբուրաշկա
Կոկորդիլոս Գենա
Շապոկլյակ

Արդյունք այս օրինակըցույց է տրված Նկ. 1.

Բրինձ. 1. Ցուցակ՝ առանց ուղղահայաց և հորիզոնական նահանջների

Ուշադրություն դարձրեք, որ ցուցակի նշիչները, որոնք հայտնվում են վեբ էջի ձախ եզրից, անհետանում են: Միայն վերևի և ներքևի լուսանցքները հեռացնելու համար, առանց ցուցակը ձախ տեղափոխելու, օգտագործեք margin-top և margin-bottom հատկությունները (օրինակ 2):

Օրինակ 2. Ցանկի նահանջ

HTML5 CSS 2.1 IE Cr Op Sa Fx

Ցանկի նահանջ

Չեբուրաշկա
Կոկորդիլոս Գենա
Շապոկլյակ

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

Նախ հիշենք լուսանցքների և լցոնումների սահմանումը ըստ W3C-ի ճշգրտման։ Տուփի մոդելում լուսանցքները պարունակության և տուփի եզրագծի միջև եղած հեռավորությունն է: Իսկ padding-ը բլոկի եզրագծի և հարակից կամ մայր տարրի եզրագծի միջև հեռավորությունն է:

Այսպիսով, եթե տարրի եզրագիծը և ֆոնը նշված չեն, ապա տարբերություն չկա, օգտագործեք padding կամ margin հատկությունը՝ նահանջները սահմանելու համար, բայց պայմանով, որ տարրի լայնությունը (լայնությունը) և բարձրությունը (բարձրությունը) նշված չեն։ և բովանդակության չափերի հաշվարկման ալգորիթմը՝ օգտագործելով տուփի չափման հատկությունները։

Ամեն դեպքում, հիշեք, որ լուսանցքները կարող են ներառվել կամ չընդգրկվել տարրի լայնության կամ բարձրության մեջ: Նահանջները միշտ դրվում են տարրից դուրս:

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

Սա լրատվական բլոկն է։ Այն բաղկացած է վերնագրից, նորությունների ցանկից և «Այլ նորություններ» հղումից: Եկեք նրանց տանք հետևյալ դասարանների անունները՝ news__title, news__list and news__more-link:

Նորություններ

Այլ նորություններ

Քանի որ այս տարրերից յուրաքանչյուրն ունի նույն ձախ և աջ լուսանցքները, ավելի լավ է սահմանել լուսանցքները մայր բլոկի վրա, քան յուրաքանչյուր տարրի համար առանձին դնել ձախ և աջ լուսանցքները:

Նորություններ ( լիցք՝ 20px 25px; )

Այսպիսով, եթե Ձեզ անհրաժեշտ է փոխել աջ և ձախ դաշտերի արժեքը, դա պետք է արվի Մեկ տեղում. Իսկ լրատվական բլոկի ներսում նոր տարր ավելացնելիս այն արդեն կունենա աջ ու ձախ անհրաժեշտ անցքերը։

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

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

Հաշվի առնելով դա՝ վերնագրի համար սահմանել ենք ներքևի մասում, իսկ «Այլ նորություններ» հղման համար՝ վերևի մասում:

News__title ( լուսանցք-ներքև՝ 10px; ) .news__more-link ( margin-top: 12px; )

Մենք կարող էինք հասնել նույն արտաքին արդյունքին՝ ավելացնելով լցոնումներ վերևում և ներքևում՝ նորությունների ցանկի համար:

News__list ( լուսանցք՝ 10px 0 12px 0; )

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

Դուք կարող եք վերևի նահանջ սահմանել յուրաքանչյուր նորության համար, բացառությամբ առաջինի, կամ ներքևի նահանջ յուրաքանչյուր նորության համար, բացառությամբ վերջինի: Առաջին տարբերակը նախընտրելի է, քանի որ:first-child կեղծ ընտրիչն ավելացվել է CSS 2.1 ճշգրտման մեջ և ունի ավելի լայն աջակցություն, ի տարբերություն:last-child կեղծ ընտրիչի, որն ավելացվել է միայն CSS 3.0 ճշգրտման մեջ:

News__list-item ( margin-top: 18px; ) .news__list-item:first-child ( margin-top: 0;)

Այսպիսով, լուսանցքների և անցքերի ճիշտ տեղադրումը թույլ է տալիս ճկուն կերպով փոխել տեսքըցանկացած բլոկ՝ առանց ոճերի փոփոխություններ կատարելու և դիզայնի խախտումների: Ամենակարևորը որոշելն է, թե որ բլոկի տարրերն են հիմնականը ( պարտադիր), և որոնք ընտրովի.

Երբեմն մենք չենք կարող ապավինել պահանջվող տարրերին: Օրինակ, մենք ունենք թռուցիկ պատուհան, որի ներսում կարող են ցուցադրվել որոշակի վերնագիր և տեքստ: Ավելին, որոշ դեպքերում կարող է չլինել տեքստ, իսկ որոշ դեպքերում՝ վերնագիր։ Այսինքն, երկու տարրերն էլ ընտրովի են:

Այս դեպքում դուք կարող եք օգտագործել հետևյալ մեթոդը նահանջներ սահմանելու համար.

Popup__header + .popup__text (լուսանցք՝ 15px; )

Այնուհետև նահանջը կհայտնվի միայն այն դեպքում, եթե օգտագործվեն երկու տարրերը: Միայն վերնագրի կամ միայն տեքստի ցուցադրման դեպքում ավելորդ նահանջ չի լինի։

Փլուզվող ուղղահայաց եզրեր

Մեկ այլ նրբերանգ, որի մասին ոչ բոլորը գիտեն, կապված է հարակից բլոկների միջև ուղղահայաց տարածությունների հետ: Նեղացման սահմանումը, որը ես տվեցի վերևում, ասում է, որ նահանջը միջև հեռավորությունն է սահմաններըընթացիկ և հարակից բլոկներ: Այսպիսով, եթե երկու բլոկ տեղադրենք միմյանցից ներքեւ և դրանցից մեկին տանք 30px ներքևի լուսանցք, իսկ մյուսին վերին լուսանցք՝ 20px, նրանց միջև եղած լուսանցքը կլինի ոչ թե 50px, այլ 30px։

Այսինքն, նահանջները կհամընկնեն, և բլոկների միջև ընկած հատվածը կհավասարվի ամենամեծ ներքևմանը, այլ ոչ թե հատումների գումարին: Այս էֆեկտը կոչվում է նաև «փլուզում»:

Խնդրում ենք նկատի ունենալ, որ հորիզոնական նահանջները, ի տարբերություն ուղղահայացների, չեն «փլուզվում», այլ ամփոփվում են: Ամփոփված են նաև դաշտերը (padding):

Իմանալով նահանջների «փլուզման» մասին՝ մենք կարող ենք օգտագործել այս հատկությունը մեր օգտին: Օրինակ, եթե հոդվածի ներսում վերնագրերը և տեքստը պետք է նահանջ անենք, ապա առաջին մակարդակի վերնագրի համար մենք ներքևի նահանջը կսահմանենք 20px, իսկ երկրորդ մակարդակի վերնագրի համար վերին նահանջը կլինի 20px, իսկ ներքևի հատվածը 10px է, իսկ բոլոր պարբերությունները մենք վերին նահանջը դնում ենք 10px:

H1 (լուսանցք-ներքև՝ 24px;) h2 (լուսանցք-վերև՝ 24px; լուսանցք-ներքև՝ 12px;) p (լուսանցք-վերև՝ 12px;)

Այժմ h2 վերնագիրը կարող է տեղադրվել կամ h1 վերնագրից հետո կամ պարբերությունից հետո: Ամեն դեպքում, վերին լուսանցքը չի գերազանցի 24px-ը:

Ընդհանուր կանոններ

Ամփոփելու համար ես կցանկանայի թվարկել այն կանոնները, որոնց ես հետևում եմ լուսանցքները և նահանջները դասավորելիս:

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

Նկարագրություն

CSS հատկություն margin-top սահմանում է լուսանցքը տարրի վերևում: Լիցքավորումը ընթացիկ տարրի վերին եզրագծի արտաքին եզրից մինչև նրա մայր տարրի ներքին եզրագիծը կամ դրա վերևում գտնվող տարրի սահմանը հեռավորությունն է: Խնդրում ենք նկատի ունենալ, որ ներկառուցված տարրերը (ցուցադրել՝ inline;) կարող են ունենալ միայն ձախ և աջ լուսանցքներ:

Արտաքին վերին շերտի չափը կարող է նշվել պիքսելներով (px), տոկոսով (%) կամ այլ CSS միավորներով: Արժեքը կարող է լինել ինչպես դրական, այնպես էլ բացասական:

Ծանոթագրություն․ երեխայի տարրի ներքևի կամ վերին շերտը կարող է ազդել մայր տարրի ընդհանուր բարձրության վրա, եթե այն չունի ֆիքսված բարձրության չափ։

Միավորել դաշտերը

Քույր տարրերի դաշտերը, որոնք գտնվում են մեկը մյուսից ներքև և գտնվում են փաստաթղթի հոսքում, համակցված են մեկ ընդհանուրի մեջ: Ստացված լուսանցքի բարձրությունը հավասար է երկու լուսանցքներից ավելի մեծի բարձրությանը, օրինակ՝ վերևի տարրի լուսանցքը (լուսանցք-ներքև) 10px է, իսկ ներքևի տարրի լուսանցքը (լուսանցք-վերև) 20px է։ , այս դեպքում մեկ լուսանցքը կլինի 20px բարձր:
Փաստաթղթի հոսքի մեջ գտնվող մայր և զավակ տարրերի լուսանցքների միաձուլումը տեղի է ունենում, եթե մայր տարրը չունի որևէ բան, որը բաժանում է իր լուսանցքը ներածական տարրի լուսանցքից (սահման, ներդիր կամ ներդիր բովանդակություն): Բացի այդ, դաշտերի միաձուլումը տեղի չի ունենա, եթե մայր տարրին ունի իր արտահոսքի հատկությունը թաքնված կամ ավտոմատ: Այս մեթոդի առավելությունն այն է, որ մայր տարրի չափը չի մեծանում: