ტექსტის ჩაღრმავების შემოწმება html- ში. შეცვალეთ ავსება და ზედა ინტერვალი CSS Top padding html- ით

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

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

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

* (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; ყუთის ზომა: border-box;) *: ადრე, *: after (-webkit-box-sizing: border- ყუთი; -მოზ-ყუთის ზომა: საზღვრის ყუთი; ყუთის ზომა: საზღვრის ყუთი;)

რატომ არის ეს საჭირო, თქვენ იკითხავთ? თქვენს კითხვას საილუსტრაციო მაგალითით ვპასუხობ.

ვთქვათ, თქვენ გაქვთ ასეთი განლაგების ელემენტი:

Გამარჯობა მსოფლიო!

ასე გამოიყურება ვარიანტი ზემოთ აღწერილი თვისებების (ზედა ელემენტი) და მათი გამოყენების გარეშე (ქვედა ელემენტი):

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

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

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

ივსება "padding" CSS თვისებით

ასე რომ, რომ გესმოდეთ საგნების მთელი ლოგიკა, მაგალითისთვის ავიღოთ შემდეგი განლაგების ფრაგმენტი:

Გამარჯობა მსოფლიო!
Გამარჯობა მსოფლიო!

მათი სტილით:

Test_div (სიგანე: 250px; საზღვარი: 1px მყარი;)

ვიზუალური ვერსია შემდეგია:


რა არის ქონება " შევსება"? ეს ეხმარება მითითებულ ელემენტებზე შევსების ორგანიზებას. მოდით დავამატოთ 10px შევსება ჩვენს განლაგებას:

Test_div (სიგანე: 250px; საზღვარი: 1px მყარი; padding: 10px; // Padding 10px)

ვიზუალურად ასე გამოდის:


თვისება 10 ნიშნავს, რომ მითითებული ელემენტების შიგნით, მათი ოთხივე მხარეს უნდა დაემატოს 10 პიქსელის აბზაცი. Pixels (px) შეიძლება შეიცვალოს პროცენტული მაჩვენებლებით ან ნებისმიერი სხვა მხარდაჭერილი CSS მნიშვნელობით.

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

Პირველი - ეს მხარეთა მკაფიოდ მითითებით:

ბალიშები: 10px; // 10px padding ზედა padding- მარჯვნივ: 10px; // 10px შევსება მარჯვნივ padding- ქვედადან: 10px; // ქვედა padding 10px padding-left: 10px; // 10px შევსება მარცხნივ

ამ შემთხვევაში, თითოეული მხარე იყენებს თავის საკუთრებას. და მეორე:

შევსება: 10px 0 0 0; // 10px padding თავზე, დანარჩენი ყველაფერი 0px padding: 10px 0; // 10px ზედა და ქვედა padding და 0px padding მხარეს padding: 0 10px; // 0px padding ზედა და ქვედა მხარეს, და 10px გვერდებზე

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

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

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

ივსება CSS "margin" თვისებით

ქონების გამორჩეული თვისება " ზღვარი"არის ის, რაც ემატება დამატებას ელემენტის გარეთ, ანუ გარეთ.

აქ დამატების ორი ვარიანტიც არსებობს.

Პირველი - პარტიის მკაფიო მითითებით:

ზღვარი-ზემო: 10px; // 10px padding ზედა ზღვარიდან მარჯვნივ: 10px; // 10px ზღვარი მარჯვენა ზღვარზე-ქვედა ნაწილში: 10px; // ქვედა padding 10px ზღვარი მარცხნივ: 10px; // 10px შევსება მარცხნივ

მეორე - ღირებულებების ჩამოთვლა, რომელთაგან თითოეული შეესაბამება თავის მხარეს:

მინდორი: 10px 0 0 0; // 10px ზედა ზღვარი, ყველაფერი დანარჩენი არის 0px ზღვარი: 10px 0; // 10px შევსება ზედა და ქვედა ნაწილში და 0px გვერდების მინდორი: 0 10px; // გარე შევსება არის 0px ზედა და ქვედა, და 10px გვერდებზე

მე აქ არ აღწერს წესებთან მუშაობის ყველა ნიუანსს, ყველაფერი იგივეა, რაც ქონების შესახებ ” შევსება», ამის შესახებ ზემოთ წერია.

ჩვენ ვიყენებთ ზღვარს შემდეგი მნიშვნელობით:

Test_div (სიგანე: 250px; საზღვარი: 1px მყარი; მინდორი: 10px; // Padding 10px)

ვიზუალურად ასე გამოიყურება:


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

მნიშვნელოვანი თვისება: თუ შედეგს კარგად დააკვირდებოდით, ალბათ შეამჩნევდით, რომ ელემენტების მეზობელი შევსება არ ჯამდება. ეს არის ის, თუ პირველ ელემენტს აქვს გარე ქვედა ბალიში 10px, ხოლო მეორეს აქვს იგივე ზედა მნიშვნელობის გარე ზედა padding, მაშინ მათ შორის საერთო მანძილი იქნება 10px. თუ შესაბამისად 10 და 15, მაშინ ჯამურია 15 და ა.შ.

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

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

ანამ დაწერა შემდეგი კოდი (მაგალითი 1) და მიიღო გვერდი, რომელიც ნაჩვენებია ნახატზე. 1. მაგრამ ანას არ სჭირდება სივრცე ბლოკებს შორის, ისევე როგორც ბლოკების მარჯვნივ და მარცხნივ. კოდექსში რა ცვლილებებია საჭირო?

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

აბზაცამდე (ტეგ

) და სათაური (ტეგი

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

როგორ დავწერო პირველი სტრიქონი თითოეული აბზაცისთვის?

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

როგორ ამოვიღოთ ზედა და ქვედა ჩაღრმავება სიიდან?

გამოიყენეთ სტილის თვისება margin-top და margin-bottom UL ან OL სელექტორისთვის, სიის ტიპის მიხედვით. ასევე შეგიძლიათ გამოიყენოთ ზოგადი მარჟის თვისება.

როგორ შევცვალო შეკვეთა ვებ – გვერდზე?

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

როგორ ამოვიღო ბალიშები ფორმის გარშემო?

ფორმის დამატებისას ტეგის საშუალებით

padding ავტომატურად ემატება მის გარშემო ზედა და ქვედა ნაწილს. მათი ამოსაღებად გამოიყენეთ nullable margin სტილის თვისება და დაამატეთ იგი FORM ამომრჩეველს.

როგორ შევცვალო ინტერვალი ტექსტის აბზაცებს შორის?

ტეგის გამოყენებისას

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

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

CSS ჩაღრმავების ვარიანტები

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

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

2. გარე აბზაცი - მანძილი ვებ – გვერდის ამჟამინდელი ელემენტის საზღვარს და მეზობელი ელემენტების საზღვრებს, ან მშობელ ელემენტს შორის. მანძილის სიდიდეს აკონტროლებს ქონება ზღვარი... ეს პუნქტი ელემენტის მიღმაა.

სიცხადისთვის, სურათი:

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

ივსება CSS– ში padding (ზედა, ქვედა, მარცხნივ, მარჯვნივ)

სტილის თვისებები padding-left, padding-top, padding-right და padding-bottom საშუალებას გაძლევთ დააყენოთ შევსების ოდენობა, შესაბამისად, ვებ-გვერდის ელემენტის მარცხნივ, ზედა, მარჯვნივ და ქვედა ნაწილში:

padding-top | padding- მარჯვნივ | შევსების ქვედა | padding-left: მნიშვნელობა | პროცენტი | მემკვიდრეობით მიღება

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

მაგალითად, ამჟამინდელი აბზაცისთვის მე გამოვიყენე სტილის წესი, რომლის თანახმად, მარცხენა საფენი 20 პიქსელია, ზედა padding 5 პიქსელზე, მარჯვენა padding 35 პიქსელზე და ქვედა 10 პიქსელზე. წესში შესვლა ასე გამოიყურება:

p.test (
padding- მარცხნივ: 20px;
padding-top: 5px;
padding- მარჯვნივ: 35px;
შევსების ქვედა ნაწილი: 10px
}

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

შევსება:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

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

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

ამრიგად, ზემოთ მოცემული CSS წესი შეიძლება შემცირდეს მაქსიმალურად და დაიწეროს შემდეგნაირად:

p.test (შევსება: 5px 35px 10px 20px)

მარჟის თვისება ან მინდვრები CSS– ში

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

ზღვარი-ზევით | ზღვარი-მარჯვნივ | ზღვარი-ქვედა | ზღვარი მარცხნივ:<значение>| ავტო | მემკვიდრეობა

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

ჩაღრმავების ოდენობა შეიძლება განისაზღვროს პიქსელებში (px), პროცენტებში (%) ან CSS– სთვის მისაღები სხვა ერთეულებში:

გვ (
ზღვარი მარცხნივ: 20px;
}
h1 (
ზღვარი მარჯვნივ: 15%;
}

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

დასაშვებია მინდვრის მნიშვნელობებად გამოყენება უარყოფითი მნიშვნელობები:

გვ (
ზღვარი მარცხნივ: -20 პიქსელი;
}

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

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

მინდორი:<отступ 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; საზღვრის ფერი: წითელი)

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

სტილი ატრიბუტებს საზღვრის მარცხენა ფერის, საზღვრის ზედა ფერის, საზღვრის მარჯვენა ფერის და საზღვრის ქვედა ფერის შეიძლება გამოყენებულ იქნას საზღვრის მარცხენა, ზედა, მარჯვენა და ქვედა მხარეების ფერის შესადგენად, შესაბამისად:

საზღვრის მარცხენა ფერი | საზღვრის ზედა ფერი | საზღვრის მარჯვენა ფერის | საზღვრის ქვედა ფერი: გამჭვირვალე |<цвет>| მემკვიდრეობა

და ბოლო საზღვრის სტილის პარამეტრების კომპლექტი ჩარჩოს ტიპი:

საზღვრის სტილი: (1,4) | მემკვიდრეობით მიღება

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

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

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

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

საზღვარი: | მემკვიდრეობით მიღება

მნიშვნელობები შეიძლება იყოს ნებისმიერი თანმიმდევრობით, გამოყოფილი სივრცეებით:

td (საზღვარი: 1px მყარი ყვითელი)

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

რჩება მხოლოდ შეჯამება:

  • დანიშნოს შევსება ჩვენ ვიყენებთ ქონებას შევსება;
  • პარამეტრებისთვის მინდვრები არსებობს წესი ზღვარი;
  • ჩარჩოს პარამეტრები მითითებულია ატრიბუტის გამოყენებით საზღვარი.

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

სულ ეს არის, გნახავ მალე!

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

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

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

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

გარე padding

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

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

მარცხენა (მინდორი-მარცხენა).

მარჯვენა (მინდორი-მარჯვნივ).

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

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

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

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

შიდა შევსება

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

ვნახოთ რა მოუვიდა მას.

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

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

ჩაღრმავება არჩეული თეგების დონეზე

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

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

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

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

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

ჩაღრმავება html დოკუმენტში

"Lorem ipsum dolor sit amet, consectetur adipisising elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. თუ გსურთ მინიმუმ veniam, quis nostrud წვრთნის ullamco შრომის nisi aliquip ex e commodo resultat. Duis aute irureit dolor is sented. velit esse cillum dolore eu fugiat nulla pariatur. გამონაკლისი შემთხვევითი cupidatat არაპროდუციალურია, თუ იგი მუშაობს ოფიციალურად, სასურველია დააკმაყოფილოს ანიმაციური პირადობის მოწმობა. " პუნქტი 1.10.32 "de Finibus Bonorum et Malorum", დაწერილი ციცერონის მიერ 45 წელს. "თუ გსურთ გაითვალისწინოთ ყველა შეცდომა, დააწკაპუნეთ აქსესუარად დააჭირეთ სადაზღვევო სამუშაოებს, ტოტალიზატორებს, ეს არის ipas quae ab illo inventore veritatis და quasi architecto beatae vitae dikta sunt explicabo. Nemo enim ipsam qulatate sitia. magni dolores eos qui racione voluptatem sequi nesciunt.neque porro quisquam is, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam ei modi tempo incidunt ut labore and dolim voltu minimu aliquamate , თუ რა ვარჯიშობთ თქვენს სხეულზე, სავარაუდოა შრომითი მოვალეობა, ნუთუ უფრო მეტია, ვიდრე საქონლის შედეგი? რომელია თუ გსურთ შეიძინოთ თუ რამე მოცულობით, თუ ეს არის ნული, მოლეტიალური შედეგი, ნულოვანი, 1914 წლის ინგლისური თარგმანი, ჰ. რაკჰემი "მაგრამ მე უნდა აგიხსნათ, თუ როგორ გაჩნდა სიამოვნების დენონსაციისა და ტკივილის განდიდების მთელი ეს მცდარი აზრი და მე მოგაწვდით სრულ ინფორმაციას სისტემის შესახებ და განვმარტავ დიდი მკვლევარის ნამდვილ სწავლებას. სიმართლე, ადამიანის ბედნიერების მშენებელი. არავინ უარყოფს, არ მოსწონს ან თავს არიდებს სიამოვნებას, რადგან ეს სიამოვნებაა, მაგრამ იმიტომ, რომ მათ, ვინც არ იცის სიამოვნების მიღება რაციონალურად, უკიდურესად მტკივნეული შედეგები აქვთ. აღარც იქ არის ყველას, ვისაც უყვარს ან მისდევს ან სურს თავის ტკივილის მიღება, რადგან ეს არის ტკივილი, მაგრამ ზოგჯერ ხდება ისეთი გარემოებები, რომლებშიც ტანჯვა და ტკივილი მას დიდ სიამოვნებას ანიჭებს. ტრივიალური მაგალითის აღება, რომელი ჩვენგანი ოდესმე ასრულებს შრომისმოყვარე ფიზიკურ ვარჯიშს, გარდა ამისა, მას შეუძლია გარკვეული უპირატესობა მიიღოს? მაგრამ ვის აქვს რაიმე შეცდომის აღმოჩენის კაცი, რომელიც ირჩევს სიამოვნებას, რომელსაც არა აქვს შემაშფოთებელი შედეგი, ან ვინც თავს არიდებს ტკივილს, რომელსაც შედეგი არ მოაქვს არ არის სიამოვნება? " პუნქტი 1.10.33 "de Finibus Bonorum et Malorum", დაწერილი ციცერონის მიერ 45 წელს. "At vero eos and accusamus and iusto odio honissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias გარდა sint შემთხვევებისა არა provident, similique sunt for culpa qui officia deserunt mollitia animor. Et al. ხელახლა შეუწყო ხელი და დაადასტურა განსხვავება. Nam liber tempore, თუ გადავწყვიტეთ ნომინაცია eligendi opium ერთად nihil ხელს უშლის qui minus პირადობის მოწმობა მაქსიმალური ადგილის წინაშე არსებული შესაძლებლობები, ყველა მოცულობის შეხედულებისამებრ არის, ყველა dolor repellendus. დროებითი საჭიროება ავტომატიზირებული ავტორიტეტი მოუსმინეთ და მოისურვებთ რედაქციას და მოუსმინეთ არასასურველი მოთხოვნით. ის გაიმეორებს ყურმილს და აიღებს თქვენს არჩევანს. 1914 წლის ინგლისური თარგმანი, ჰ. რაკჰემი "მეორეს მხრივ, ჩვენ ვგმობთ სამართლიანი აღშფოთებით და არ ვწუნებთ კაცებს, რომლებიც იმდენად შეცბუნებულები და დემორალიზებულები არიან მომენტალური სიამოვნების მომხიბვლელობით, სურვილისგან ისე დაბრმავებულები, რომ მათ არ შეუძლიათ გაითვალისწინონ ტკივილი და უბედურება. და ეს ბრალი ეკუთვნის მათ, ვინც თავის მოვალეობას ვერ ასრულებს ნებისყოფის სისუსტის გამო, რაც იგივეა, რაც თქვა შრომისმოყვარეობისა და ტკივილის შემცირებით. ეს შემთხვევები სავსებით მარტივია და მათი გარჩევა მარტივია. თავისუფალ საათში როდესაც ჩვენი არჩევანის ძალა ამოუწურავია და როდესაც არაფერი უშლის ხელს, შეგვიძლია გავაკეთოთ ის, რაც ყველაზე მეტად მოგვწონს, მისასალმებელია ყველა სიამოვნება და თავიდან ავიცილებთ ყველა ტკივილს. მაგრამ გარკვეულ ვითარებაში, მოვალეობის ან ბიზნესის ვალდებულებების გამო, ხშირად ხდება სიამოვნების უარყოფა და გაღიზიანების მიღება. ამიტომ ბრძენი ადამიანი ყოველთვის ითვალისწინებს ამ საკითხში შერჩევის ამ პრინციპს: იგი უარყოფს სიამოვნებებს სხვა უფრო დიდი სიამოვნებების მისაღებად, თუ არა ის იტანჯება ტკივილებზე, რათა თავიდან აიცილოს უარესი ტკივილი ”.