მინდვრების და ბალიშების მოწყობა CSS-ში. html-ში ჩაღრმავების კონტროლი css div გარე შეწევებზე

ვებ გვერდზე ელემენტების უფრო ლამაზი ჩვენებისთვის გამოიყენება css-ში გარე და შიდა ჩაღრმავებები და ახლა ამას გავაანალიზებთ მაგალითებით.

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

css-ში ეს თვისებები იწერება ჩაღრმავებისთვის ამ გზით (მაგალითად, აღებულია აბზაცი):

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

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

შეწევის მნიშვნელობები.

  • პირველი მნიშვნელობა:ზედა შეწევა;
  • მეორე მნიშვნელობა:შეწევა მარჯვნივ;
  • მესამე მნიშვნელობა:ქვედა ზღვარი;
  • მეოთხე მნიშვნელობა:მარცხენა შეწევა.

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

ხოლო შიდა ბალიშისთვის მე დავაზუსტე: 10px ზევით, მარცხნივ და მარჯვნივ და 14px ქვედაში.

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

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

და თუ თქვენ გაქვთ იგივე მნიშვნელობები გარე მინდვრებისთვის ზედა და ქვედა ნაწილში (მაგალითად: 16 პიქსელი), ასევე იგივე მნიშვნელობები გარე მინდვრებისთვის მარცხნივ და მარჯვნივ (მაგალითად: 20 პიქსელი), მაშინ ჩანაწერს ექნება კიდევ უფრო შემოკლებული ფორმა:

შესაბამისად, შიდა css ჩაღრმავებისთვის, ჩანაწერი ამ ერთის იდენტურია.

ცალკეული ჩაღრმავების გამოყენება: თითოეული მხარისთვის ცალ-ცალკე.

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

ბალიშის თვისებები თითოეული მხარისთვის.

  • margin-top: 3px; გარე ზედა padding;
  • ზღვარი მარცხნივ: 4 პიქსელი; გარე მარცხენა ბალიშები;
  • margin-right: 6px; გარე მარჯვენა ზღვარი;
  • ზღვარი-ქვედა: 10 პიქსელი; გარე ქვედა ბალიშები.

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

მაგალითად, თქვენ უკვე გაქვთ ყველა შეწევა css-ში ყველა img სურათისთვის.

ანუ (სიცხადისთვის) გარე ბალიშს აქვს შემდეგი მნიშვნელობები: ზედა 10 პიქსელი, მარცხენა და მარჯვენა: თითოეული 20 პიქსელი და ქვედა 14 პიქსელი.
და padding არის 6px ოთხივე მხარეს.

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

შედეგად, სურათი, რომელიც თქვენ დაამატეთ verx კლასთან, მიიღებს css-ში მითითებულ ყველა შეწევას img ტეგისთვის და შეცვლის მხოლოდ ზედა მხარის ზღვარს (ჩვენს შემთხვევაში: 40 პიქსელი).

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

აღწერა

ადგენს ბალიშის რაოდენობას ელემენტის მარჯვენა კიდიდან. padding არის მანძილი მიმდინარე ელემენტის მარჯვენა საზღვრის გარე კიდიდან შიდა საზღვარიმისი მთავარი ელემენტი (ნახ. 1).

Სინტაქსი

margin-right: მნიშვნელობა | ავტო | მემკვიდრეობით

ღირებულებები

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

Auto მიუთითებს, რომ შეწევის ზომა ავტომატურად გამოითვლება ბრაუზერის მიერ. inherit მემკვიდრეობით იღებს მნიშვნელობას მშობლისგან.

HTML5 CSS2.1 IE Cr Op Sa Fx

ზღვარი-მარჯვნივ

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


ამ მაგალითის შედეგი ნაჩვენებია ნახ. 2.

ბრინჯი. 2. მარჟა-უფლების საკუთრების გამოყენება

ობიექტის მოდელი

document.getElementById ("elementID") .style.marginRight

ბრაუზერები

ბრაუზერი Internet Explorer 6 აორმაგებს მარცხენა ან მარჯვენა ბალიშის მნიშვნელობას მცურავი ელემენტებისთვის, რომლებიც ჩადგმულია მშობელ ელემენტებში. ბალიშები, რომელიც მშობლის მხარეს არის გაორმაგებული. პრობლემა, როგორც წესი, წყდება დისპლეის: inline დამატებით ელემენტზე.

Internet Explorer 7.0 ვერსიის ჩათვლით არ უჭერს მხარს მემკვიდრეობის მნიშვნელობას.

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

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

ვინაიდან ვებ გვერდის შინაარსის უმეტესი ნაწილი წარმოდგენილია ტექსტის სახით, ამ ტექსტის მიმზიდველი და ეფექტური სტილის შექმნის უნარი მნიშვნელოვანი უნარია, რომელიც შეიძლება გახდეს ვებ დიზაინერი. ყველაზე ხშირად გამოყენებული და რეკომენდირებული მეთოდი აღწერილობისა და აბზაცის შესაყვანად არის 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რომ შესაძლებელია საჭირო ელემენტების განთავსება თქვენი ინტერნეტ რესურსის გვერდზე, როგორც თქვენ ჩაიფიქრეთ და უნდა გააკეთოთ.

გამარჯობა! თავიდან მინდოდა ამ სტატიის 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 თვისებებიგანხილვისთვის. პრაქტიკა ხელს შეუწყობს მათ კონსოლიდაციას. აქ მოცემულია რამდენიმე საბოლოო რჩევა, თუ როგორ გამოიყენოთ ეს მასალა თქვენი ვებსაიტის განვითარებაში:

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