ტეგი ამატებს ბალიშს ზედა ცენტრში. შეცვალეთ padding და ზედა ინტერვალი CSS-ში

გამარჯობა! თავიდან მინდოდა ამ სტატიის 4 მცირედ დაყოფა, მაგრამ მერე დავფიქრდი. რისთვის? ყოველივე ამის შემდეგ, უფრო მოსახერხებელია, როდესაც ასეთი ინფორმაცია გროვდება ერთი მასალის ფარგლებში.

ასე რომ, დღეს ჩვენ ვისწავლით როგორ გავაკეთოთ CSS შეწევამარცხნივ და ყველა სხვა მხარეს - მარჯვნივ, ზემოთ და ქვემოთ. მათი დამზადება შესაძლებელია სურათებისა და ტექსტებისთვის. ისინი ორი ტიპისაა:

• გარე;
• შიდა.

პირველისთვის საკვანძო თვისებაა ზღვარი, მეორესთვის - padding. სიცხადისთვის, მე გავაკეთე თქვენთვის პატარა მაგალითი. იმისათვის, რომ ვიზუალურად მოსახერხებელი ყოფილიყო შიდა და გარე სივრცის გარჩევა, დავამატე ხილული ცხრილი. ვნახოთ რა მოხდა?

მინდვრები

მათი CSS სტილის ფაილში ჩაწერით, შეგიძლიათ დააყენოთ საინფორმაციო ბლოკის ორიენტაცია გვერდზე. მაგალითად, გადავიტან მარცხნივ და ქვევით. ნება მომეცით დაუყოვნებლივ ვაჩვენო, როგორი იქნება.

ზოგადად, თქვენ შეგიძლიათ გამოიყენოთ შემდეგი ვარიანტები შეწევის დასაყენებლად.

მარცხენა (ზღვარი-მარცხნივ).

მარჯვნივ (ზღვარი-მარჯვნივ).

ზედა (ზღვარი-ზედა).

ქვედა (ზღვარი-ქვედა).

ახლა მე გაჩვენებთ კიდევ ერთ მაგარ ნიუანსს.

როგორც ხედავთ, შეგიძლიათ გამოიყენოთ ერთ-ერთი ვარიანტი - ეფექტი იგივეა. მხოლოდ მეორე შემთხვევაში კოდი უფრო კომპაქტური აღმოჩნდება. ასევე გაითვალისწინეთ, რომ შეწევა დაყენებულია საათის ისრის მიმართულებით. ყველაფერი იწყება ზემოდან და მთავრდება მარცხნივ.

ბალიშები

პროცედურა აქაც მსგავსია. მხოლოდ ახლა დავამატებ ახალ თვისებებს არა მთელი ცხრილისთვის, არამედ სვეტების შიგთავსისთვის.

ვნახოთ რა გამოვიდა.

CSS-ში შიდა მინდვრების ანალოგიით, გარე მინდვრები შეიძლება დაიწეროს შემოკლებული კოდით ან ცალ-ცალკე გვერდებისთვის.

ეს იყო მთავარი პუნქტები. და ბოლოს, მე გაჩვენებთ, სხვაგვარად როგორ შეგიძლიათ გააადვილოთ გარკვეული სამუშაო.

შეწევა არჩეულ ტეგის დონეზე

ზემოთ ნახსენებ შემთხვევებში, ისინი დაყენებულია ტექსტისა და სურათებისთვის ერთდროულად. სინამდვილეში, თქვენ შეგიძლიათ დააყენოთ მანძილი ელემენტებთან კონკრეტული ტეგის დონეზე. მე გაჩვენებთ როგორ მუშაობს. მე ვაუქმებ ბოლო ცვლილებებს და დავაზუსტებ სპეციალურ კოდს სტილის ფაილში.

მოდით შევხედოთ რა მოხდა ცვლილებების შენახვის შემდეგ.

სურათი დარჩა ადგილზე, მხოლოდ ტექსტი გადავიდა მარცხნივ. მსგავსი მანიპულაციები შეიძლება გამოყენებულ იქნას სხვა ბლოკებზე, მაგალითად, tr, span.

როგორც დამატებითი ინფორმაციაგირჩევთ წაიკითხოთ პუბლიკაცია დავალების შესახებ. ასევე საკმარისად არის აღწერილი საინტერესო გზები. შეიძლება სასარგებლო იყოს ტექსტში წითელი ხაზის ფორმირებისთვის ან სხვა მოქმედებების შესასრულებლად.

გარდა ამისა, შეგიძლიათ გამოიწეროთ უფასო ბიულეტენი ელექტრონული ფოსტის მისამართები. ბლოგის გამოსაწერად არის სპეციალური ფორმა. მოგვიანებით გნახავ.

ვებ რესურსი ფასდება მომხმარებლების მიერ მისი ვიზუალური მიმზიდველობის მიხედვით. ამიტომ, ინფორმაციულად სასარგებლო ტექსტიც კი შეიძლება არ წაიკითხოს იმის გამო, რომ ის ცუდად არის შექმნილი. დასკვნა - თქვენ უნდა ყურადღებით და ყურადღებით მიუდგეთ არა მხოლოდ საიტის გვერდების სემანტიკურ შინაარსს, არამედ მის ვიზუალურ პრეზენტაციას. CSS ტექნოლოგიის გამოჩენამ გააფართოვა მიმზიდველი სტატიების შექმნის შესაძლებლობები. ერთ-ერთი თვისება, რომელიც შექმნილია წერის გასაადვილებლად წასაკითხად, არის CSS ტექსტის ჩაღრმავება.

მინდვრები და ბალიშები: რა განსხვავებაა?

სანამ ტექსტის ფორმატირებას დაიწყებთ, უნდა გესმოდეთ, რა არის მინდვრები და შეწევები. იმისდა მიუხედავად, რომ მარკირების ეს ელემენტები ზოგიერთ შემთხვევაში მომხმარებლისთვის ერთნაირად გამოიყურება, მათ შორის ფუნდამენტური განსხვავებებია:

• ველი მითითებულია საკუთრებით padding, შეწევა - ზღვარი;
• ზღვარი განისაზღვრება ბლოკის შინაარსსა და საზღვარს შორის არსებული უფსკრულით, შეწევა - მიმდებარე ბლოკების საზღვრებს შორის;
• მინდვრები შეიძლება იყოს გათვალისწინებული ან არ იყოს გათვალისწინებული ელემენტის ზომებში (სიგანე და სიმაღლე).

მარჟის ქონება

ასე რომ, CSS ტექსტის ჰორიზონტალური ან ვერტიკალური ჩაღრმავების დასაყენებლად გამოიყენეთ კონსტრუქცია ზღვარი. ეს თვისება ვრცელდება ტეგზე დოკუმენტის პუნქტის განსაზღვრა. ძალიან მარტივი შემთხვევაიწერება როგორც:

ზღვარი: 12 პიქსელი.

ეს ხაზი ნიშნავს, რომ ტექსტის ბლოკის (ან ნებისმიერი სხვა ბლოკის) ირგვლივ ყველა მხრიდან იქნება 12 პიქსელის ჩაღრმავება. ინტერვალის გასადიდებლად, მაგალითად, სამჯერ, უბრალოდ დაწერეთ:

ზღვარი: 36 პიქსელი.

მაგრამ რა მოხდება, თუ ბლოკებს შორის ინტერვალი განსხვავებული უნდა იყოს თითოეულ მხარეს? ვებ გვერდის დეველოპერები იყენებენ ჩაწერის რამდენიმე ფორმას:

1. ზღვარი: 11px 22px.
2. ზღვარი: 11px 22px 33px.
3. ზღვარი: 11px 22px 33px 44px.

პირველ მაგალითში, 11 პიქსელი იქნება ჩაჭრილი ბლოკის ქვედა და ზედა საზღვრებიდან, ხოლო 22 პიქსელი ბლოკის გვერდებზე. მეორე ჩაწერის ფორმის მიხედვით, ბლოკის ზედა კიდესა და შიგთავსს შორის იქნება 11 პიქსელი, ქვედას შორის 33 პიქსელი და გვერდებზე 22 პიქსელი. მესამე შემთხვევაში, ბალიშები იქნება 11 პიქსელი ზევით, 22 პიქსელი მარჯვნივ, 33 პიქსელი ქვედა და 44 პიქსელი მარცხნივ.

ასევე შესაძლებელია ბლოკის საზღვრამდე მანძილის ჩაწერა მხოლოდ ერთ მხარეს: margin-top, margin-bottom, margin-left, margin-right. საკუთრების სახელების რუსულად თარგმნით, ადვილია მათი დანიშნულების გამოცნობა. მაგალითად, შემდეგი ჩანაწერი ამბობს, რომ მარჯვენა ზღვარი იქნება 22 პიქსელი:

ზღვარი მარჯვნივ: 22 პიქსელი.

სხვა მხარეებისთვის, ბლოკის ირგვლივ დისტანციები მიჩნეულია მშობელი ელემენტის მნიშვნელობის ტოლი.

საკუთრება ზღვარიაქვს ფუნქცია, რომელიც დეველოპერმა უნდა გაითვალისწინოს CSS ტექსტის ვერტიკალური ჩაღრმავების გამოყენებისას. ინტერვალები მეზობელი ელემენტებიარ არის შეჯამებული, არამედ ერთმანეთზე ზედმიყენებული. მაგალითად, მიეცით ერთ-ერთ ბლოკს ზღვარი-ქვედა: 15 პიქსელი, და მის მიმდებარე ბლოკი ქვემოთ ზედა ზღვარი: 35 პიქსელი. სკოლის არითმეტიკა და საღი აზრი ვარაუდობს, რომ მათ შორის საერთო სივრცე იქნება 50 პიქსელი. პრაქტიკაში ეს ასე არ არის. ბლოკი ქონების მაღალი ღირებულებით ზღვარიმეზობელს "შთანთქავს". შედეგად, ელემენტებს შორის მანძილი იქნება 35 პიქსელი.

"წითელი" ხაზი

დოკუმენტის შედგენაში ტექსტის რედაქტორი, მომხმარებლებს ურჩევნიათ მიუთითონ ყოველი ახალი აბზაცი „წითელი“ ხაზის გამოყენებით. თან CSS-ის გამოყენებითმარცხნივ ტექსტის შეწევა მარტივია - გამოყენებულია კონსტრუქცია ტექსტი-შეწევა. ასე წერია:

ტექსტის შეწევა: 11 პიქსელი.

ანუ, აბზაცის პირველი ხაზი გადაინაცვლებს მარცხენა კიდეზე 11 პიქსელით. იმისათვის, რომ ტექსტი ვებ გვერდზე უფრო დაემსგავსოს რედაქტორში არსებულ დოკუმენტს, დამატებით უნდა დააყენოთ, ანუ დაწეროთ:

ტექსტი-შეწევა: 11px;

ტექსტის გასწორება: გამართლება.

პიქსელების გარდა, მარკირების აღწერისას ნებადართულია სხვა ერთეულების გამოყენება - ინჩი, ქულები, პროცენტები. დაე, ბლოკს ჰქონდეს CSS ტექსტის ჩასმა 10%. ბლოკის სიგანე 500 პიქსელით, წითელი ხაზი იქნება 50 პიქსელი (10% 500-დან).

ამ თვისების დაყენება შესაძლებელია მემკვიდრეობით. ეს ჩანაწერი ამბობს, რომ ბლოკი იყენებს მშობელი ბლოკის მსგავს თვისებას.

ტექსტი-შეწევა: მემკვიდრეობით.

გასაკვირია, რომ მას ასევე შეუძლია უარყოფითი მნიშვნელობები! ამ შემთხვევაში წარმოიქმნება ეგრეთ წოდებული გადახურვები, ანუ მთავარი ტექსტი რჩება ადგილზე და პირველი ხაზი გადაინაცვლებს მარცხნივ 22 პიქსელით:

ტექსტის შეწევა: -22 პიქსელი.

იმისათვის, რომ ასოები არ გასცდეს ბრაუზერის მარცხენა საზღვრებს, გარდა ამისა ტექსტი-შეწევათქვენ უნდა გამოიყენოთ კონსტრუქცია ველის დასაყენებლად:

padding-მარცხნივ: 22px.

განიხილება CSS-ის ძირითადი თვისებები. და პრაქტიკა ხელს შეუწყობს მათ კონსოლიდაციას. აქ მოცემულია რამდენიმე საბოლოო რჩევა იმის შესახებ, რაც ისწავლეთ თქვენი ვებსაიტის განვითარებაში:

• წითელი ხაზი და ტექსტის ჩაღრმავება სხვადასხვა ცნებებია და მათ აღსანიშნავად სხვადასხვა თვისებები გამოიყენება;
• ვერტიკალური ჩაღრმავებისთვის, მათემატიკის წესები არ გამოიყენება - ინტერვალები გადახურულია, უფრო დიდი მნიშვნელობის მქონე ელემენტი "იმარჯვებს";
• უარყოფითი აბზაცის შეწევაგამოიყენება სურათის გამოყენებით აბზაცის პირველი სტრიქონის აღსანიშნავად.

თვისება განსაზღვრავს, თუ რამდენი ჰორიზონტალური ტექსტის სივრცე უნდა იყოს შეფუთული ტექსტის ელემენტის პირველი ხაზის დაწყებამდე. მანძილი გამოითვლება ელემენტის საწყისი კიდედან და კონტეინერი ბლოკის დონისთვის.

იმის გამო, რომ ვებ გვერდის შინაარსის უმეტესი ნაწილი ტექსტის სახითაა, ამ ტექსტის მიმზიდველი და ეფექტური სტილით მოწყობის შესაძლებლობა არის მნიშვნელოვანი უნარი, რომ გახდეთ ვებ დიზაინერი. აღწერილობისა და აბზაცის შესაყვანად, ყველაზე ხშირად გამოყენებული და რეკომენდებული მეთოდი იქნება CSS-ის გამოყენებით. აქ მოგეწოდებათ სხვადასხვა მაგალითებიროგორ შეიძლება CSS-ის გამოყენება ტექსტისთვის და შეწევის ელემენტისთვის.

დააყენეთ ზედა ზღვარი CSS-ის გამოყენებით

ზედა ჩაღრმავების შესაქმნელად გამოიყენება, მაშინ, რა თქმა უნდა, გარეშე CSS თვისებებიჩვენ არ შეგვიძლია ამის გაკეთება, რადგან ჩვენ გვჭირდება margin-top, ეს არის მნიშვნელობა, რომელიც შეიძლება დაყენდეს სხვადასხვა გზით, როგორიცაა px და სტანდარტულად პიქსელებში, em, % და ასე შემდეგ, რომ ყველაფერი ხდება CSS სტილში ერთეულებში. გაზომვა.

გამოყენების მაგალითი:

ზღვარი-ბლოკი(
margin-top:50px;
}

რა შეგიძლიათ ნახოთ სურათზე:

თქვენ ასევე შეგიძლიათ გამოიყენოთ ის ბლოკების ჩამოსაშლელად, აქ შეგიძლიათ გამოიყენოთ თვისება ე.წ ზღვარი-მარცხნივასევე ზღვარი-მარჯვნივდა ზღვარი-ქვედა. სადაც ჩვენ უბრალოდ მივუთითებთ margin თვისებას, სადაც შესაძლებელია მისთვის 4 პარამეტრის თავიდან დაყენება, აქ განვიხილავთ კონცეფციას საათის ისრის მიმართულებით, სადაც ვიწყებთ ზედა მხრიდან გაგრძელებით თითოეული მხარის ქვეშ.

ზღვარი: 20px 50px 30px 50px;

ასევე არის ზედა padding CSS-ში

ეს ხდება, რომ თქვენ გჭირდებათ შინაარსის ელემენტის ვერტიკალურად გასწორება, ეს ეხება მშობელ ბლოკს, აქ შესაძლებელია სხვა თვისებების გამოყენება, როგორიცაა padding-top, რომელიც აკეთებს, უფრო სწორად, აყენებს შიდა padding-ს ნაგულისხმევად. თუ ვსაუბრობთ მსგავს თვისებებზე, რომლებიც ასევე შეიძლება ჩაიწეროს და დააყენოს ანალოგიურად, აქ გვაქვს ზღვარი px, em, % და სხვა ერთეულებში.

მაგალითი:

padding-block (
padding-top: 47px;
}

ახლა ჩვენ შეგვიძლია განვიხილოთ ქონების ანალოგი ზღვარიდა padding, რომელიც გამოიყენება ბლოკის ელემენტის სხვა მხარეებზე შეწევის დასაყენებლად, მაგრამ უკვე ცალკე მიდის: padding-მარცხნივ, padding-მარჯვნივ, padding-ქვედა. სადაც შეგიძლიათ დაუყოვნებლივ დააყენოთ თქვენთვის საჭირო მანძილი, მხოლოდ ყველა მხარისთვის და ყველაფერი ერთდროულად იქნება.

padding: 10px 20px 40px 50px;

აქ შეგიძლიათ თავდაპირველად დააყენოთ მნიშვნელობა როგორც for ზღვარიდაწყებული როგორც გესმით ზემოდან, მაგრამ შემდეგ ყველაფერი მიდის საათის ისრის მიმართულებით, ეს არის მარჯვნივ, ქვემოთ, მარცხნივ და ა.შ.

ახლა დამოკიდებულია სხვადასხვა სიტუაციები, თქვენ გაქვთ ზემოდან შეწევის შესაძლებლობა CSS სტილები, სადაც ჩვენ ვიყენებთ თვისებებს ზღვარიდა paddingრომ შესაძლებელია საჭირო ელემენტების განთავსება თქვენი ინტერნეტ რესურსის გვერდზე, როგორც თქვენ განზრახული გაქვთ და უნდა გააკეთოთ.

CSS განლაგება ყოველთვის მართკუთხა იყო. ნებისმიერი გლუვი ხაზი დეველოპერის კომპეტენციაა. სტილის წესები იძლევა საკმარის ვარიანტებს, რათა გვერდს გლუვი ფორმა მისცეს ეკრანის გარჩევადობის ფარგლებში. მაგრამ განლაგების ნებისმიერი ელემენტი ყოველთვის არის მართკუთხედი, რომელშიც ინფორმაციის მოწყობა რეგულირდება CSS წესებით.

გვერდითი შიგთავსი მნიშვნელოვანია ყველა გვერდის ელემენტისთვის, როდესაც ის აბსოლუტურად განლაგებულია, ხოლო CSS ზედა შიგთავსი სპეციალურად არის განსაზღვრული, რადგან მას აქვს მნიშვნელობა სხვადასხვა ელემენტებისთვის, განსაკუთრებით ინლაინებისთვის.

პოზიციონირების ძირითადი წესები

ბლოკის ელემენტს აქვს ჩაღრმავების წესი მასში შემავალი ელემენტის გვერდებიდან (ზღვარი), ჩაღრმავების წესი მასში შემავალი ელემენტებისთვის (შეფუთვა) და საზღვრის სიგანე (საზღვარი), რომლის გამოყენებაც შესაძლებელია.

განსაკუთრებული მნიშვნელობა აქვს ზემოდან ჩაღრმავებას. CSS ბლოკში აკავშირებს ჩასმის წესებს ამ ბლოკის შიგნით აბსოლუტურად და შედარებით განლაგებული ელემენტების წესებთან.

ჩვეულებრივი პრაქტიკა CSS წესებისთვის: შეგიძლიათ მიუთითოთ ბალიშები ყველა მხარეს თანაბრად, წყვილებში ზედა/ქვედა და მარჯვნივ/მარცხნივ, ან თითოეული მხარისთვის ცალ-ცალკე. მაგალითად,

• ზღვარი: 10 პიქსელი;
• padding: 10px20px;
• ბალიშები: 10px20px30px40px.

პირველ შემთხვევაში, დაყენებულია ელემენტის ჩაღრმავება გარე კონტეინერის გვერდებიდან, რომელშიც ის მდებარეობს. მეორე შემთხვევაში, ზედა და ქვედა მინდვრები არის 10 პიქსელი, მარცხნივ და მარჯვნივ - 20 პიქსელი. მესამე შემთხვევაში, ჩაღრმავების ზომა მითითებულია ყველა მხრიდან: ზედა, მარჯვენა, ქვედა და მარცხნივ.

ყველა ამ შემთხვევაში, ჩაღრმავება ზედა CSS არის 10 პიქსელი.

წესები, რომლებიც ცვლის ელემენტების პოზიციას

თუ განლაგების ელემენტი არ არის განლაგებული აბსოლუტურად, ის განლაგებულია გვერდის ფორმირების ზოგადი თანმიმდევრობით.

თუ განვსაზღვრავთ ჩასვით CSS-ის თავზე scCurrInfo ელემენტში, მიზანი მიღწეული იქნება, მაგრამ თუ ლი დონეზე არ იქნება.

ამ მაგალითში, padding წესის გამოყენებით: 40px; მოითხოვს სიგანისა და სიმაღლის წესების ადექვატურ შემცირებას 80 პიქსელით. IN წინააღმდეგ შემთხვევაში scCurrInfo ბლოკის ზომა გადააჭარბებს გარე ბლოკის საზღვრებს.

თუ scCurrInfo-ს აღწერილობიდან ამოვიღებთ ჩასმის წესს, მაგრამ დავამატებთ მას 20 პიქსელის მნიშვნელობით სიის ელემენტის სტილის აღწერილობაში, ჩვენ მხოლოდ მივიღებთ ზედა შეწევა. CSS არ გამოიყენებს ამ მნიშვნელობას სხვა მხარეებზე.

ბუნებრივია, შეწევის წესის ეს გამოყენება ვრცელდება თითოეულ li ელემენტზე.

ზოგადი შინაარსის ფორმატირების პრაქტიკა

ზოგიერთი დეველოპერი აღწევს სრულყოფილებას ბლოკის ელემენტების გამოყენებით გვერდების განლაგებით. როგორც ჩანს, ეს კლასიკური პრაქტიკაა – დაიწყო ცხრილებით და საკუთარი სასწავლო პროცესი ბლოკებით დაასრულო.

ბლოკის განლაგების თანდაყოლილი თავისუფლება მომხიბლავია და დეველოპერის ფანტაზია შეიძლება არ შემოიფარგლოს მკაცრი ცხრილის წესებით: მხოლოდ რიგები, მხოლოდ უჯრედები, შერწყმა მხოლოდ ჰორიზონტალურად და ვერტიკალურად. არაფერია დამახასიათებელი ურთიერთობის იდეებისთვის.

იმავდროულად, ცხრილებს, აშკარა ნაკლოვანებების გარდა, ბევრი თვისობრივი უპირატესობა აქვს. ზედა ფენის შექმნისას CSS ითვალისწინებს ბალიშს მარცხნივ, მარჯვნივ (ქვემოთ არის სპეციალური წერტილი). ცხრილის უჯრედების წესები საშუალებას გაძლევთ აკონტროლოთ როგორც ვერტიკალური, ასევე ჰორიზონტალური გასწორება. მწკრივის სტილის გამოყენებით და უჯრედების სტილებთან მათი კომბინირებისას, შეგიძლიათ შექმნათ შინაარსის რთული ხედები.

გვერდის ჩვეულებრივი წარმოდგენა მართკუთხედების სახით სულაც არ უშლის ხელს მის ცხრილის სახით წარმოჩენას. ეს ასევე მართკუთხედებია, მაგრამ ისინი ასევე ცხრილის უჯრედებია, ანუ მათ აქვთ საკუთარი წესები, რომლებიც ავსებენ ბლოკების წესებს.

აბსოლუტური პოზიციონირება

ბლოკი წესით POSITION: აბსოლუტური ; განთავსდება მისი კოორდინატებით განსაზღვრულ ადგილას იმ ბლოკთან, რომელშიც ის მდებარეობს.

CSS წესების დამახასიათებელი მახასიათებელია ის, რომ "პრაქტიკა არის ჭეშმარიტების საუკეთესო კრიტერიუმი" უმეტეს შემთხვევაში, განსაკუთრებით მაშინ, როდესაც საჭიროა ბრაუზერის თავსებადობა და განლაგება ხდება ხელით, სასურველია სრულფასოვანი სახელმძღვანელოების შესწავლა კასკადური სტილის ფურცლებზე.

ცხრილების გამოყენება ხშირად იწვევს უჯრედის შინაარსის გადაადგილების საკითხებს. მსგავსი ოფსეტი ბლოკში ყოველთვის არ მოქმედებს ყველა ელემენტზე. ექსპერიმენტებით, შეგიძლიათ მიაღწიოთ სასურველ შედეგს. ტრივიალური ამოცანა: როგორ ზედა ფენის ამოღება ყოველთვის არ არის CSS-ისთვის ტრივიალური გადაწყვეტა.

ზოგიერთ შემთხვევაში, როდესაც თქვენ გიწევთ გვერდის ელემენტების განლაგება ზოგიერთი პოპულარული ვებსაიტის შინაარსის მართვის სისტემის წიაღში, თქვენ მაინც უნდა მიაქციოთ ყურადღება არა მხოლოდ ექსპერიმენტულ პრაქტიკას, არამედ გადახედოთ თქვენი კოლეგების გამოცდილებას.

ბლოკის განლაგება ხშირად გამოიყენება ვებსაიტის ან ბლოგის შექმნისას. ამის შედეგად ხშირად საჭიროა ბლოკების შეწევა. ამ მიზეზით, დაახლოებით როგორ შევიტანოთ შეწევა CSS-შიდეტალურად არის აღწერილი ამ გაკვეთილზე. ბრაუზერისთვის, თითოეული ტეგი არის კონტეინერი, რომელსაც აქვს შინაარსი, ბალიშები, გარე მინდვრები და საზღვარი. ამ გაკვეთილზე ჩვენ ვისწავლით თუ როგორ უნდა გავაკეთოთ შიდა და გარე შეწევა და განვიხილოთ მათი ძირითადი პარამეტრები.

ქვემოთ მოყვანილი სურათი ნათლად აჩვენებს ბლოკის შეწევის პარამეტრებს:

როგორც ხედავთ, შეწევა შეიძლება გაკეთდეს ოთხი მიმართულებით: ზედა შეწევა (ზემოდან), ქვედა შეწევა (ქვემოთ), მარცხენა შეწევა (მარცხნივ) და მარჯვენა შეწევა (მარჯვნივ). საზომი ერთეულები შეიძლება იყოს პიქსელები, პროცენტები და სხვა CSS ერთეულები - შეიტყვეთ მეტი მათ შესახებ. ეს გაკვეთილი იყენებს პიქსელებს.

ბლოკის შევსება

CSS-ში ჩასმაზე პასუხისმგებელი ქონება არის padding. ასე რომ, მოდით შევხედოთ ბლოკისთვის padding-ის დაყენების მაგალითს:

padding-top: 5px; /*ზედა padding*/ padding-left: 8px; /*left padding*/ padding-right: 8px; /*right padding*/ padding-bottom: 5px; /*ქვედა ბალიშები*/

ამ მაგალითში, ბალიშები დაყენებულია ცალკე ბლოკის თითოეული მხარისთვის. გარდა ამისა, CSS-ში შეწევის დაყენების რამდენიმე გზა არსებობს:

ზღვარი: 5px 8px 5px 8px; /*ზედა, მარჯვენა, ქვედა, მარცხენა მინდვრები*/ მინდვრები: 5px 8px 5px; /*აღწერს ზედა, მარცხენა, მარჯვენა, ქვედა მინდვრებს*/ ზღვარი: 5px 8px; /*აღწერს ზედა და ქვედა, მარჯვენა და მარცხენა მინდვრებს*/ ზღვარი: 7px; /*აღწერს ყველა 7px ბალიშს*/

პირველი და ბოლო მეთოდების დამახსოვრება უფრო ადვილია. პირველ შემთხვევაში, ჩაღრმავებები მოთავსებულია საათის ისრის მიმართულებით (ზემოდან, მარჯვნივ, ქვევით, მარცხნივ) - ჩვენ შეგვიძლია მივუთითოთ ნებისმიერი რაოდენობის შეწევა, ყველა მხრიდან ჩაღრმავება ერთნაირი იქნება;

დაბლოკეთ მინდვრები

CSS-ში ზღვრებზე პასუხისმგებელი ქონება არის ზღვარი. ზღვრების მაგალითები CSS-ში:

margin-top: 5px; /*ზედა ზღვარი*/ margin-left: 10px; /*მარცხენა ზღვარი*/ margin-right: 10px; /*მარჯვენა ზღვარი*/ margin-bottom: 5px; /*ქვედა ზღვარი*/

padding: 5px 10px 5px 10px; /*ზედა, მარჯვენა, ქვედა, მარცხენა მინდვრები*/ padding: 5px 10px 5px; /*აღწერს ზედა, მარცხენა და მარჯვენა, ქვედა ბალიშს*/ padding: 5px 10px; /*აღწერს ზედა და ქვედა, მარჯვენა და მარცხენა ბალიშს*/ padding: 7px; /*აღწერს ყველა 7px ზღვარს*/

ამრიგად, როგორ შევიტანოთ შეწევა CSS-ში- კითხვა არ არის რთული, მაგრამ ძალიან აქტუალური. ზემოთ აღწერილი ინფორმაციის უკეთ გასაგებად, უნდა გახსოვდეთ, რომ არსებობს ორი თვისება: padding - შიდა შეწევა და ზღვარი - გარე შეწევა. ასევე, როგორც უკვე იცით, შეწევის დაყენების რამდენიმე გზა არსებობს, შეგიძლიათ გამოიყენოთ ისინი.