რას ნიშნავს padding მარცხენა პარამეტრი? Padding, Margin და Border - დააყენეთ CSS-ში შიდა და გარე მინდვრები, ასევე საზღვრები ყველა მხარისთვის (ზედა, ქვედა, მარცხნივ, მარჯვნივ). ბალიშები და საზღვარი - შიდა ბალიშები და ჩარჩოები
CSS padding-ის სიმძლავრე ეხება ბალიშის განთავსებას ელემენტის შუაში მის საზღვრებს შორის.
CSS padding სინტაქსი
padding: ზედა მარჯვენა ქვედა მარცხენა;
- ზედა - წვდომა ელემენტის ზედა საზღვრიდან;
- უფლება - წვდომა ელემენტის მარჯვენა საზღვრიდან;
- ქვედა - წვდომა ელემენტის ქვედა საზღვრიდან;
- მარცხენა - წვდომა ელემენტის მარცხენა კიდედან;
მნიშვნელობები ყველაზე ხშირად მითითებულია პიქსელებში. ასევე დასაშვებია ასობით და სხვა მოქმედი CSS ერთეულის გარეგნობის მორგება.
შენიშვნა 1
დასაშვებია, რომ მას არ ჰქონდეს მნიშვნელოვანი ღირებულება. მნიშვნელობების რაოდენობის მიხედვით, მნიშვნელობები განსხვავდება:
- თუ მითითებულია 3 მნიშვნელობა, მაშინ პირველი მნიშვნელობა ადგენს ცხოველის წვდომას, მეორე - ერთდროულად მარცხნივ და მარჯვნივ, ხოლო მესამე - ბოლოში.
- თუ მითითებულია 2 მნიშვნელობა, მაშინ პირველი მნიშვნელობა ადგენს შესასვლელს ზედა და ქვედა მხარეს, მეორე - მარცხენა და მემარჯვენე ერთად.
- თუ მითითებულია 1 მნიშვნელობა, მაშინ შეყვანა დაყენებულია იმავე შეყვანაზე ყველა მხარისთვის. მაგალითად:
padding: 10px 10px 10px 10px; შეგიძლიათ უფრო კომპაქტურად მიუთითოთ: padding: 10px;
შენიშვნა 2
ადმინისტრაციის გვერდზე დენის CSSზღვარი, უარყოფითი ბალიშის მნიშვნელობები მიუღებელია.
ასევე, padding-ს აქვს 4 დამატებითი CSS ძალა. მათი კანი პირდაპირ სიმღერაზე დგას.
- padding-left - შესვლა ელემენტის მარცხენა კიდიდან;
- padding-right - ჩანაწერი ელემენტის მარჯვენა კიდიდან;
- padding-top - წვდომა ელემენტის ზედა კიდიდან;
- padding-bottom - შესვლა ელემენტის მარცხენა კიდიდან;
მაგალითად
padding: 3px 5px 7px 10px; ან შეგიძლიათ მოხსენებაში იკითხოთ: padding-მარცხნივ: 10px; padding-right: 5px; padding-top: 3px; padding-bottom: 7px;
კონდახები ელემენტის შუაში სხვადასხვა გამონაზარდებით
მაგალითი 1. ტექსტის შეყვანა ტეგის შუაში
Пример с нулевыми отступам (padding: 0px)
Пример с одинаковым отступом от всех границ (padding: 10px)
Пример с разными отступам (padding: 10px 0px 0px 30px)
Вот как это выглядит на странице:
Пример с нулевыми отступам (padding: 0px)
Пример с одинаковым отступом от всех границ (padding: 10px)
Пример с разными отступам (padding: 10px 0px 0px 30px)
Пример 2. Отступ объекта внутри объекта
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).
Рис. 1. Поле слева от текста
Свойство padding
позволяет задать величину поля сразу для всех сторон элемента или определить поля только для указанных сторон.
Краткая информация
Синтаксис
padding: [<размер> | <проценты>] {1, 4}
Обозначения
Описание
Пример
<тип>
Указывает тип значения.
<размер>
A && B
Значения должны выводиться в указанном порядке.
<размер> && <цвет>
A | B
Указывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps
A || B
Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
width || count
Группирует значения.
[ crop || cross ]
*
Повторять ноль или больше раз.
[,<время>]*
+
Повторять один или больше раз.
<число>+
?
Указанный тип, слово или группа не является обязательным.
inset?
{A, B}
Повторять не менее A, но не более B раз.
<радиус>{1,4}
#
Повторять один или больше раз через запятую.
<время>#
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
Величину полей можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. При указании поля в процентах, значение считается от ширины родителя элемента.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
div {
background: #e4efc7;
padding: {{ playgroundValue }}px
;
}
Пример
padding
კონდუქტომეტრია რბილად გადასცემს ელექტრონული მეთოდიამოღებულია მეთილკარბილის შუაში შეღწევისგან დამოუკიდებლად.
კონდახზე მოცემული წაკითხვის შედეგი ნახ. 2.
Პატარა 2. Zastosuvannya vlastivosti padding
ობიექტის მოდელი
ობიექტი.სტილი.შეფუთვა
სპეციფიკაცია
კანის სპეციფიკაცია გადის ანთების რამდენიმე ეტაპს.
- რეკომენდაცია - სპეციფიკაცია აფასებს W3C-ს და რეკომენდირებულია როგორც სტანდარტი.
- კანდიდატის რეკომენდაცია ( შესაძლო რეკომენდაცია) - ჯგუფი, რომელიც იცავს სტანდარტს, კმაყოფილია იმით, რომ იგი აკმაყოფილებს თავის მიზნებს, მაგრამ მოითხოვს სპეციალისტთა გუნდის დახმარებას სტანდარტის დანერგვაში.
- შემოთავაზებული რეკომენდაცია გაკეთდა რეკომენდაცია) - ამ ეტაპზე, W3C Advisory-ში წარდგენის დოკუმენტი ნარჩენი გამაგრებისთვის.
- სამუშაო პროექტი - პროექტის უფრო მომწიფებული ვერსია განხილვის შემდეგ და განხორციელდა ცვლილებები სისრულის უზრუნველსაყოფად.
- რედაქტორის მონახაზი ( სარედაქციო ჩერნეტკა) - სტანდარტის შავი ვერსია პროექტის რედაქტორების მიერ შეტანილი ცვლილებების შემდეგ.
- პროექტი ( იხვის სპეციფიკაცია) - სტანდარტის პირველი შავი ვერსია.
ბრაუზერები
ბრაუზერები
ბრაუზერის ცხრილს ექნება იგივე მნიშვნელობები.
ვგულისხმობ, ეს ძალიან მნიშვნელოვანი გაკვეთილია. ამ მოდიფიკაციის შემდეგ, შეგიძლიათ გააფართოვოთ ელემენტები გვერდით, დააყენოთ შესასვლელები მათ შორის, შექმნათ ისინი კონკრეტული ბლოკის შუაში და დააყენოთ ველები.
padding
padding არის ძალა, რომელიც ემსახურება ელემენტზე რიგი ველის დაყენებას კორდონის შიდა კიდიდან ადგილამდე. ამის ნაცვლად, შეიძლება არსებობდეს პირველადი ტექსტი, სურათი ან ბავშვის ელემენტი, რომელსაც ასევე შეუძლია შექმნას საკუთარი ველები.
ერთეულები შეიძლება იყოს პიქსელი (px) ან პროცენტი (%).
#ბლოკი (
padding: 12px; / * ბლოკის კორდონებიდან ადგილამდე შესვლა - ყველა მხრიდან იქნება 12 პიქსელი * /
}
მოედანზე შესვლა შესაძლებელია მხოლოდ ერთ მხარეს:
padding-top- ძალა, რომელიც ქმნის ველებს მხეცისთვის.
padding-მარჯვნივ- ძალა, რომელიც ქმნის ველებს მარჯვენა ხელით.
padding-ქვედა- ძალა, რომელიც ქმნის ქვემოთ მოცემულ ველებს.
padding-მარცხნივ- ძალა, რომელიც ქმნის ბოროტების ველებს.
#ბლოკი (
padding-bottom: 25px; / * ქვედა ზღვარი არის 25 პიქსელი * /
padding-მარცხნივ: 15px; / * მარცხენა ველი 15 პიქსელი * /
}
თუ აღნიშნეთ, რომ ამ გზით უნდა მიუთითოთ ველები 2 ან 3 მხარეს, დაინახავთ სხვა კოდს. რისთვისაც საჭიროა დენის ბალიშის ჩანაწერის შემცირება. მისი მეშვეობით მითითებულია ოთხივე მნიშვნელობა - კანის კიდიდან ერთ რიგში, ერთწლიანი რიგის უკან, ზემოდან დაწყებული:
Padding: TopIndent RightIndent IndentBottom IndentLeft;
#ბლოკი (
padding: 25px 10px 15px 6px; / * ზედა 25 პიქსელი, მარჯვნივ 10 პიქსელი, ქვედა 15 პიქსელი, მარცხენა 6 პიქსელი * /
}
ზღვარი
ზღვრის სიმძლავრე, ბალიშისგან განსხვავებით, ადგენს ზღვარის რაოდენობას სასაზღვრო ელემენტებს შორის.
თუ ელემენტი არის ბავშვი, მაშინ შესასვლელი ვრცელდება ელემენტის კორდონიდან მამის კორდონის შიდა კიდემდე.
როგორც ელემენტს ყოველდღიური მამა ჰყავს, მაშინ ავტორიტეტების დაწესებულება პატივს სცემს სხვა ელემენტების ჩარჩოს კიდეებამდე ფართო სივრცეს.
#ბლოკი (
ზღვარი: 4px;
}
წინა ქვეყნებიდან მიღებული მონაცემების ჩასართავად ხელმისაწვდომია შემდეგი ავტორიტეტები:
ზღვარი-ზედა- ძალა, რომელიც ქმნის მხეცის შესასვლელს.
ზღვარი-მარჯვნივ- ძალა, რომელიც ქმნის შესასვლელებს მარჯვნიდან.
ზღვარი-ქვედა- ძალა, რომელიც მოდის ქვემოდან.
ზღვარი-მარცხნივ- ძალა, რომელიც ქმნის ბოროტების აფეთქებებს.
შიგთავსის სიმძლავრის გარდა, ზღვარს ასევე აქვს შესაძლებლობა მოკლედ ჩაწეროს მნიშვნელობა სხვადასხვა მხარისთვის. რუხი მიჰყვება გოდინნიკის ისარს ზედა ველიდან:
ზღვარი: ზედა ზღვარი მარჯვენა ზღვარი ქვედა ზღვარი მარცხნივ;
#ბლოკი (
ზღვარი: 15px 10px 5px 25px; / * ზედა 15 პიქსელი, მარჯვნივ 10 პიქსელი, ქვედა 5 პიქსელი, მარცხენა 25 პიქსელი * /
}
გმადლობთ პატივისცემისთვის!
წინა განყოფილებაში ჩვენ ვიცოდით ისეთი CSS უფლებამოსილებების შესახებ, როგორიცაა ზღვარი და padding. ახლა მათ უფრო დეტალურად განვიხილავთ და გადავხედავთ, როგორ განსხვავდებიან ისინი ერთმანეთისგან და რა თვისებები აქვთ.
თქვენ შეგიძლიათ შექმნათ ხარვეზები ელემენტებს შორის ამა თუ იმ გზით, მაგრამ padding ნიშნავს გაფართოებას ერთი ბლოკიდან მეორეზე, ბლოკებს შორის სივრცეში. წაკითხვის ეკრანის სურათზე წინა კონდახი:
padding ამატებს სივრცეს ბლოკებს შორის, ხოლო ზღვარი ქმნის ხარვეზებს ბლოკებს შორის
როგორც ხედავთ, მინდვრები და CSS შეყვანაისინი არ ეთანხმებიან ერთმანეთს, თუმცა ზოგჯერ კოდექსის დათვალიერების გარეშე შეუძლებელია იმის დადგენა, თუ რომელი უფლებამოსილება ენიჭებათ მათ. ეს იკარგება ამ სიტუაციებში, თუ ბლოკის ჩარჩო ან ფონი შეიცვალა.
CSS-ში მინდვრების ან შეყვანის დასაყენებლად ელემენტის კანის მხარეს, თქვენ გაქვთ შემდეგი კონტროლი:
შეიყვანეთ:
- padding-top: მნიშვნელობა;
- padding-right: მნიშვნელობა;
- padding-bottom: მნიშვნელობა;
- padding-left: მნიშვნელობა;
სფეროები:
- margin-top: მნიშვნელობა;
- margin-right: მნიშვნელობა;
- ზღვარი-ქვედა: მნიშვნელობა;
- მარგი-მარცხნივ: მნიშვნელობა;
მნიშვნელობები შეიძლება მითითებული იყოს ნებისმიერ CSS ერთეულში - px, em, %, და ა.შ. მაგალითი: margin-top: 15px.
ლაპარაკი ასევე ძალიან ადვილია სტენოგრაფიული ჩანაწერის ზღვარი და padding CSS. თუ თქვენ გჭირდებათ ველების ან შეყვანის დაყენება ელემენტის ოთხივე მხარისთვის, აბსოლუტურად აუცილებელია ცალ-ცალკე ჩაწეროთ სიმძლავრე კანის მხარისთვის. ყველაფერი უფრო მარტივია: ზღვრისთვის და ბალიშისთვის შეგიძლიათ მიუთითოთ 1, 2, 3 ან 4 მნიშვნელობა. მნიშვნელობების რაოდენობა დამოკიდებულია იმაზე, თუ როგორ არის განაწილებული პარამეტრები:
- 4 მნიშვნელობა: შეყვანები დაყენებულია ელემენტის ყველა მხარეს შემდეგი თანმიმდევრობით: წინა, მარჯვენა, ქვედა, მარცხენა: padding: 2px 4px 5px 10px;
- 3 მნიშვნელობა: padding დაყენებულია ზედა მხარეს, შემდეგ ერთდროულად მარცხენა და მარჯვენა, და შემდეგ ქვედა: padding: 3px 6px 9px;
- 2 მნიშვნელობა: წინა მხარე დაყენებულია ერთსა და იმავე დროს ზედა და ქვედა მხარეებისთვის, შემდეგ კი ერთდროულად მარცხენა და მარჯვენა: padding: 6px 12px;
- 1 მნიშვნელობა: ელემენტის ყველა მხარისთვის დაყენებულია იგივე padding: padding: 3px;
იგივე წესები ვრცელდება და ძალაუფლების ზღვარი CSS. ყურადღება მიაქციეთ იმ ფაქტს, რომ ზღვრისთვის შეგიძლიათ გამოიყენოთ უარყოფითი და უარყოფითი მნიშვნელობები (მაგალითად, -3px), რაც ზოგიერთ შემთხვევაში შეიძლება კიდევ უფრო უარესი იყოს.
ზღვრის კოლაფსი
განვიხილოთ სიტუაცია: ორი ბლოკის ელემენტი განლაგებულია ერთმანეთის ზემოთ და ისინი აკონკრეტებენ ზღვრის ველს. ზედა ბლოკი დაყენებულია ზღვარზე: 60 პიქსელი, ხოლო ქვედა ბლოკი დაყენებულია ზღვარზე: 30 პიქსელი. ლოგიკური იქნება ვივარაუდოთ, რომ ორ ელემენტს შორის ორი ველი უბრალოდ შეეჯახება და ბლოკებს შორის უფსკრული იქნება 90 პიქსელის ტოლი.
თუმცა, მოდი სხვაგვარად წავიდეთ. სინამდვილეში, ასეთ სიტუაციაში, ჩნდება ეფექტი, რომელსაც ეწოდება drop-off, როდესაც ელემენტების ორი მიმდებარე ველიდან არის ყველაზე დიდი ზომის შერჩევა. ჩვენს აპლიკაციაში ელემენტებს შორის სივრცე 60 პიქსელის ტოლი იქნება.
დადექით ერთი დიდი ღირებულების ბლოკებს შორის ზღვრის კოლაფსი ვრცელდება მხოლოდ ელემენტების ზედა და ქვედა მინდვრებზე და არ ვრცელდება მარჯვენა და მარცხენა მხარეს მინდვრებზე. უფსკრულის ნარჩენი ღირებულება განსხვავდება სხვადასხვა სიტუაციებში:
- თუ ზღვრის მნიშვნელობა დადებითია, ზღვრის ზომა იქნება უფრო დიდი მნიშვნელობის ტოლი.
- თუ ერთ-ერთი მნიშვნელობა უარყოფითია, მაშინ ველის ზომის გამოსათვლელად საჭიროა გამოკლოთ მნიშვნელობის ჯამი. მაგალითად, 20px და -18px მნიშვნელობებით, ველის ზომა იქნება ტოლი:
20 + (-18) = 20 - 18 = 2 პიქსელი.
- თუ მნიშვნელობა უარყოფითია, შეადარეთ ამ რიცხვების მოდული და შეარჩიეთ რიცხვი, რომელიც უფრო დიდია მოდულში (ასევე მცირეა ვიდრე უარყოფითი რიცხვები). მაგალითი: თქვენ უნდა დაარეგულიროთ ზღვრის მნიშვნელობები -6px და -8px. ტოლი რაოდენობის მოდულები ტოლია 6 და 8 სტრიქონზე. ვარსკვლავი ანათებს 6-8-ზე. ველის ქვეჩანთის ზომაა -8 პიქსელი.
- როდესაც მნიშვნელობები მითითებულია სხვადასხვა CSS ერთეულში, ისინი ჩამოთვლილია ერთზე, რის შემდეგაც ხდება მათი გათანაბრება და არჩეულია უფრო დიდი მნიშვნელობა.
- ბავშვის ელემენტების ზღვრის ზომა განისაზღვრება კიდევ უფრო: თუ ზედა ნაწილს აქვს უფრო დიდი ზღვარი, ვიდრე ქვედა, მაშინ პრიორიტეტი ენიჭება ამ ელემენტს. ამ შემთხვევაში, მამის ზედა და ქვედა ველების ზომები გახდება იგივე, რაც მითითებულია სადესანტოში. ვისთანაც არ იქნება დგომა მამასა და დანარჩენებს შორის.
დღეს ჩვენ ვიმუშავებთ განსხვავებაზე HTML padding-ს შორის ( შიდა წვდომა) I margin (გარე შეყვანა) CSS-ში. დავიწყოთ მათი სინტაქსით. ამ ავტორიტეტების ჩაწერის რამდენიმე გზა არსებობს: ძირითადი და შემოკლებული:
padding და Margin CSS-ში
განხილული ავტორიტეტების დაწერის ორიგინალური ფორმა უფრო ადვილი გასაგებია, რადგან ის მსგავსია ყველა სხვა წერის სტილთან:
ზვიჩაინას ჩანაწერი:
padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-მარცხნივ: 20px;
მეორეს მხრივ, სტენოგრამის ჩანაწერი CSS-ში აერთიანებს მთელ ძალას ერთ ძლიერ ძალაში: „padding“.
მოკლე შენიშვნა:
padding: 10px 20px 40px 10px;
ბალიშს და ზღვარს აქვს ოთხი მნიშვნელობა: ზედა, მარჯვენა, ქვედა და მარცხენა. ზემოთ ნაჩვენები შემოკლებულ ჩანაწერებში მითითებულია იგივე მნიშვნელობები, დამატებულია ერთი ტიპის სივრცე. ჯერ, რამდენიმე მნიშვნელობით, წვდომა მხეცზე, შემდეგ წვდომა მარჯვნივ, ქვედა (ქვედა HTML) და ბოროტზე:
ბალიშები: TOP RIGHT BOTTOM LEFT; (შეფუთვა: ქვემოთ მარჯვნივ მდებარე მხეცი ბოროტია)
ეს ჩანაწერი შეიძლება შემცირდეს სამ მნიშვნელობამდე, თუმცა მარცხენა და მარჯვენა ბალიშები / ზღვარი იგივეა. მაგალითად, თუ ზედა ზღვარი არის 30 პიქსელი, მარცხენა და მარჯვენა არის 10 პიქსელი, ხოლო ქვედა არის 40 პიქსელი, მაშინ შეგიძლიათ დააკონფიგურიროთ შესვლის ფორმა:
padding: 30px 10px 40px;
მალე ორჯერ იქნება!
ვინაიდან ზედა და ქვედა ბალიშები / ზღვარი ერთნაირია, ხოლო მარჯვენა და მარცხენა ბალიშები / ზღვარი იგივეა, შეგიძლიათ მხოლოდ ორი მნიშვნელობის მითითება. ამ შემთხვევაში, ზედა და ქვედა მინდვრები არის 10 პიქსელი, ხოლო მარცხენა და მარჯვენა მინდვრები არის 20 პიქსელი. ჩვენი CSS ასე გამოიყურება:
ბალიშები: TOP / BOTTOM RIGHT / LEFT; (შეფუთვა: ზედა / ქვედა მემარჯვენე / მარცხენა) padding: 10px 20px;
მხოლოდ ერთი მნიშვნელობა!
ჩვენი ძველი ვერსიაშემცირებული ჩანაწერი padding და margin HTML შეიცავს მხოლოდ ერთ მნიშვნელობას. ამ ჩანაწერის ვიკორიზაცია შესაძლებელია, თუ ყველა ჩანაწერი ხელმისაწვდომია ( მხეცი, ქვემოთ, მემარჯვენე და მემარცხენე) იგივე მნიშვნელობები ჩნდება. თუ გვინდოდა, რომ ყველა მხარეს ჰქონდეს 20 პიქსელის მცირე მინდვრები, მაშინ CSS ასე გამოიყურება:
რა ფორმატი გამოვიყენო Vikory პოსტისთვის? მაგალითად, თუ ელემენტს უნდა მივცე მხოლოდ ქვედა ზღვარი, მე შევცვლი ორიგინალურ ჩანაწერს, რადგან წონა უნდა დავაყენო მხოლოდ ერთ მხარეს: padding-bottom: 30px;
როგორ გავუმკლავდეთ PADDING-სა და MARGIN-ს
ამ ორ ხელისუფლებას შორის შესამჩნევი განსხვავებაა. padding გამოიყენება სივრცის დასამატებლად HTML ელემენტის კონტეინერის შუაში. ზღვარი გამოიყენება ელემენტების გარე კორდონთან სივრცის შესაქმნელად.
გააცნობიერე, რომ შიგთავსი ზამთრის ქურთუკს გაწყობს. ქურთუკი შენი ნაწილია, მაგრამ მე რომ დაგესროლო, ქვედა ზემოდან დავფარავდი, თითქოს შენი ქურთუკი არ გეცვას.
თქვენ ასევე შეგიძლიათ იფიქროთ ბალიშზე, როგორც მუყაოს კოლოფში არსებულ ნივთებზე. თუ ყუთს მოათავსეთ პოლისტიროლის ქაფით, დააჭირეთ მას ყუთის კიდეებს. CSS-ში padding იგივეა.
ახლა იფიქრეთ ზღვარზე, როგორც თქვენს გარშემო არსებულ უხილავ ძალის ველზე. ძალის ველი იცავს სხვა მეტყველებას თქვენგან. ქურთუკით და ქურთუკით კონდახისკენ შემობრუნდა, თითქოს ქურთუკი მოგაყარა და ძალის ველში გავლა შეძლებდა, მაშინ დაფარავდა მხოლოდ შენ და შენს ქურთუკს, როგორც ადრე.
PADDING და MARGIN განაცხადის საიტზე
მოდით შევხედოთ ავტორიტეტებს კონდახებზე ელემენტებით. მოდით ვისაუბროთ აბზაცზე (ტეგ
), შემდეგ ახალ ფერს დავამატებთ ფონს და დავამატებთ 30 პიქსელის ზღვარს კანის მხრიდან.
ქვემოთ ხედავთ, რომ მის გვერდით არის აბზაცი 30 პიქსელით. მარჯვნივ სურათზე გამოვიყენე ხელსაწყოები გუგლ ქრომიიმის ჩვენება, თუ სად იწყება/მთავრდება HTML შიგთავსი რომელი ელემენტისთვის. მწვანე ფერიქვემოთ მოცემულ სურათზე არის საფენი, რომელიც მოთავსებულია კონტეინერის გარშემო. ფონის მუქი ლურჯი ფერი შეავსებს შიდა არეალს:
ახლა დაამატეთ ზღვარი აბზაცს. მე დავამატებ 30 პიქსს წინა და ქვედა მხარეს, ასევე 20 პიქსს მარცხნივ და მარჯვნივ. ქვემოთ მოყვანილი სურათი გვიჩვენებს, თუ როგორ შეიცვალა ეს აბზაცი ზღვრიდან. სურათის რეალური სიგანე უფრო მცირე გახდა, რადგან ზღვარი მორგებულია საზღვრებთან შესატყვისად HTML ელემენტი. მარჯვნივ ხედავთ, რომ ნარინჯისფერი ფერი არის ელემენტის გარშემო არსებული ზღვარი. ზღვარი ყოველთვის მდებარეობს ბალიშის უკან და მუქი ლურჯი ფონი არ არის გაშლილი მინდვრის ზონაზე:
თუ აქამდე დაბნეული იყავით, თითქოს HTML-ის შიგთავსის და ზღვრის ამოცნობას ცდილობდით, ექსპერიმენტების დროა! რაც უფრო მეტად ეწინააღმდეგებით CSS-ის ძალას და შეცვლით მათ მნიშვნელობებს, მით უფრო მეტად მიხვდებით, თუ როგორ მუშაობენ ისინი.
სტატისტიკის თარგმანი" CSS padding VS. ზღვარი და როგორ გამოვიყენოთ ისინი„მეგობრული გუნდი ემზადებოდა პროექტისთვის.
კარგი ცუდია
- სახელმძღვანელო
ეს სტატიები არ ართულებს მარტივ მეტყველებას, მაგრამ ხაზს უსვამს საერთო სტანდარტების პატივისცემას, რომლებიც ხშირად დავიწყებულია. მნიშვნელოვანია იმის უზრუნველყოფა, რომ სტრუქტურა გააზრებული იყოს განლაგების ყველა ასპექტში და არანაკლებ მნიშვნელოვანია მისი დაცვა შესავალში. და განლაგების ერთ-ერთი მთავარი პრინციპია სითხე. და თქვენ შეგიძლიათ მარტივად შეიტანოთ ნებისმიერი ცვლილება და არ გააფუჭოთ არაფერი. ჯენას შესახებზღვარი და ბალიშები ამ საკითხში ძალიან მნიშვნელოვან როლს თამაშობენ.
ნაკლებად გადატვირთული პრინციპები აისახება გვერდზე ელემენტების შუა პოზიციაზე. ასევე შესაძლებელია დეკორატიული ელემენტების შერწყმა. ალე არც ისე კატეგორიულია.
Ძირითადი პრინციპები:
- შესასვლელი დაყენებულია ჯიხურში დარჩენილ შესაძლო ელემენტზე.
- შეყვანები შეიძლება განისაზღვროს დამოუკიდებელი ელემენტებისთვის (BEM ბლოკი).
- ჯგუფის დარჩენილი ელემენტისთვის, შეყვანა აღდგება ნულამდე (ამიერიდან).
შესასვლელები წინა ელემენტიდან წინ მიდის.
ზღვარი(ები) დაყენებულია წინა ელემენტიდან წინა ელემენტამდე, პირველი ელემენტიდან მეორემდე, ქვევით, მარცხნიდან მარჯვნივ. 
ეს ნიშნავს, რომ ასეთი ხელისუფლება margin-left და margin-top არ არის ვიკორიზებული(დადანაშაულების გარეშე). ბალიშით კეთდება ყველა წვრილმანი (გარდა იმისა, რომ იგი გამოიყენება დეკორატიული მიზნებისთვის, გაგზავნის არეალის გასაზრდელად და ა.შ.). თუ ბლოკი მოითხოვს წვდომას მხეცთან ან ბოროტთან, ის იქნება აღებული ბალიშის ზედა და ბალიშის მარცხენა ნაწილებისთვის.
პირდაპირ გადადით ხეების ჯიხურების ნაკადთანბლოკი თავისთავად არ მუშაობს.
თირკმელი სტატიკურ მდგომარეობაშია და ნებისმიერი შემოდინება შორდება სხვის სტრუქტურას.
შესასვლელი დაყენებულია ჯიხურში დარჩენილ შესაძლო ელემენტზე
margin(s) განსაზღვრავს მხოლოდ ხის ყუთების სასაზღვრო ელემენტებს. აპლიკაციას აქვს 3 სია, შემდეგი სტრუქტურით:
- შორს, შორს, ვერბალურს მიღმა.
წვდომა უნდა შეეცადოს არა დამხმარე ელემენტების სტრუქტურისთვის, არამედ დაქვემდებარებული ელემენტების სტრუქტურისთვის.
ეს სიტუაცია.main-section__item ასევე მოიცავს დანარჩენს, ვისაც შეუძლია მიეცეს წვდომა სიების გაყოფაზე. იგივე ეფექტის მიღწევა შესაძლებელია, თუ გსურთ მიიღოთ წვდომა სიაზე, ჭარბი, გაგზავნილი და ა.შ.
ამ კონდახის დასრულება ადვილია. თუ გსურთ იხილოთ ბევრად მეტი ინვესტიცია, შეგიძლიათ გამოიყენოთ მონაცემები, თუ ზოგიერთი მარგინემი დაიშლება. და იცოდეთ ბალიშების შესახებ.
სათაური შვიდი სიტყვისგან შემდგარ განყოფილებაში
თუ მაგალითს აიღებთ სათაურთან ერთად, თქვენ უნდა შექმნათ წვდომა სათაურისთვის მხეცზე. შემდეგ დარჩენილი ელემენტი იქნება განყოფილება და ამისთვის padding-top, ზღვარი (და), რომელიც უნდა გადატვირთოს ნაგულისხმევად, უნდა გადატვირთოს.
ამ პრინციპის დაცვის უმარტივესი მიზეზი არის ის, რომ გაგიადვილდეთ მომავალში მიდგომის ცოდნა, ან თქვენთვის ან მათთვის, ვინც მომავალში იმუშავებს თქვენს განლაგებით. ასე ამბობენ ხელნაკეთობაზე.
დაკავშირებული პრობლემები შეიძლება წარმოიშვას, თუ შეყვანის ცუდი სტრუქტურის მქონე განლაგება ნაჩვენებია დინამიურად ან დუბლირებული.
შეყვანები შეიძლება განისაზღვროს დამოუკიდებელი ელემენტებისთვის (BEM ბლოკი)
არასოდეს ჩაერიოთ ელემენტების შეყვანაში, რომლებიც შეიძლება დაზიანდეს არაერთხელ. თუმცა, თუ არ ხართ კმაყოფილი მეთოდოლოგიით, ისარგებლეთ პერსპექტივით. ვისთვისაც დამწვარია. დამწვრობა კარგია. ან დამატებითი გაკვეთილები. თუ თქვენ გჭირდებათ წვდომის ბლოკის შექმნა. დახმარების თხოვნა არაფერ შუაშია:
- ელემენტში ჩავარდნა (რადგან ეს ბლოკი არ იქნება ამოღებული ელემენტიდან, არ იქნება წვდომა და ის უბრალოდ შეიძლება განთავსდეს სხვა ადგილას).
- კლასში დამატება (შეგიძლიათ შექმნათ ბლოკი ელემენტით).
- დამწვარი (ბლოკად, როლით, მხოლოდ პოზიციაში).
.block__item> .block (ზღვარი-მარჯვნივ: 10px;) .block.block__item (ზღვარი-მარჯვნივ: 10px;) .block-wrap> .block (ზღვარი-მარჯვნივ: 10px;) ჯგუფის დარჩენილი ელემენტისთვის, შეყვანა აღდგება ნულამდე (ამიერიდან)
მაგალითად ავიღოთ სია და სურათები.
ეს ჰორიზონტალური მენიუდა ლოგო (რომელიც არის მარჯვენა). 
დარჩენილი li-სთვის, ჩანაწერი აღდგება ნულამდე. შესვლის მეშინია გემის ელემენტებს შორის ul და img. რა დაემართა სხვა პრინციპს.
ავიღოთ კიდევ ერთი მაგალითი:
...
10.10.10
დააწკაპუნეთ ჩვენზე, რათა შეხვიდეთ ახალ ელემენტებზე, როგორც specified.blog-preview__item (ზღვარი-ქვედა: 20px;). დარჩენილი ზღვარი გადატვირთულია ნულამდე, ხოლო ქვედა ჩანაწერი ჩანაცვლებულია ბლოგის გადახედვის ჩანართით. რა დაემართა სხვა პრინციპს.
უფრო ხშირად სხვა ფსევდო კლასები უნდა გამოსწორდეს: ბოლო შვილი.
ელემენტი: არა (: ბოლო შვილი) (ზღვარი-ქვედა: 20 პიქსელი;) // ან // .პუნქტი (// სხვა სტილები // ზღვარი-ქვედა: 20 პიქსელი; &: ბოლო-შვილი (ზღვარი-ქვედა: 0;) ) // ან margin-top, მთავარი იდეა აქ, არა პირდაპირ Margin, არამედ სპეციფიკურობით // .item + .item (margin-top: 20px;) // ან // .item (// სხვა სტილის / / & + & (ზღვარი ზედა: 20 პიქსელი;))
ბრალი
რა თქმა უნდა, არის განსხვავებები, არა ტრივიალური მოთხოვნები და ნიუანსები, რომლებშიც შეუძლებელია ამ პრინციპების დაცვა და სხვაგვარად მიისწრაფოდეს იდეალური მონაცემების მიღწევაში, რათა შეიქმნას განლაგება რაც შეიძლება სუფთა.
P.S.რაჯუ გაეცანით პუბლიკაციას
ძერელო: ზღვარი თუ ბალიშები?
ფილიპ სპორერი.
თარგმანი: vl49.
რა მნიშვნელობა აქვს ამ მეთოდით ფორმატირებას?
დიდი ხანია ვიტანჯები მსგავსი ტიპის მტკიცებულებების ძიებაში. და ბევრი გაუმაძღარი, გაუგებარი CSS კოდის დაწერის შემდეგ, რომელსაც თან ახლავს სხვადასხვა გვერდითი მოვლენები, შემიძლია სიამოვნებით ვთქვა, რომ აღმოვაჩინე საკვების მოპყრობის ძირითადი წესები.
უფრო ზუსტად, დავუბრუნდეთ ტიპიურ სიტუაციას, რომელიც ყველაზე კარგად ცნობილია ყველასთვის, ვინც იცის 2017 წელს კომპიუტერისთვის შექმნილი ინტერფეისი. ეს არის უმარტივესი ბარათის შაბლონი.
ამ აპლიკაციაში შეგიძლიათ იხილოთ ორი ტიპის ინტერვალი:
ბარათებს შორის (blakitni); ბარათებსა და მათ კონტეინერს შორის (მწვანე); აქ ძალიან მნიშვნელოვანია გვესმოდეს, რომ ჩვენ გვაქვს ორი განსხვავებული ცნება, რომლებიც, როდესაც ერთად იკრიბებიან, სულაც არ არის ერთმანეთთან დაკავშირებული. თუ მე მჭირდება ბარათებსა და მათ კონტეინერს შორის მანძილის შეცვლა, მაგალითად, 24 პიქსელამდე, მაშინ არ არის საჭირო თავად ბარათებს შორის მანძილის დამატება.
კონდახის დანერგვა დამატებითი CSS-ის გამოყენებით?
ასეთი შაბლონის შექმნის ფაქტიურად ათასობით გზა არსებობს მინდვრების და შიდა შეყვანის გამოყენებით, მაგრამ მე მინდა თქვენს ყურადღებას წარმოგიდგინოთ ერთ-ერთი მათგანი, რომელიც აჩვენებს ზღვრისა და ბალიშის უფლებამოსილებების სწორ გამოყენებას. უფრო მეტიც, ეს მეთოდი საშუალებას გაძლევთ მოგვიანებით დაამატოთ სხვა ბარათები.
კონტეინერი (
padding: 16px;
}
.ბარათი + .ბარათი (
ზღვარი: 0 0 0 8px;
}
საერთო ჯამში, 2 სელექტორი და 2 წესი.
რომელი ფუნქცია აღინიშნება პლუსის ნიშნით?
სიმბოლო + თვითონ არის ჯამის ამომრჩეველი. ეს განსაზღვრავს მხოლოდ ელემენტს ამ სელექტორის წინ მითითებულ ელემენტის შემდეგ.
როგორც ზემოთ მოყვანილი სურათიდან ჩანს, ჩვენს ფანჯარაში შეირჩევა დამატებითი სელექტორი კანის ბარათი, რომელიც გადაიცემა ნებისმიერი სხვა ბარათით. ამ გზით, ფულის სელექტორის დახმარებით, შეგვიძლია დავაყენოთ მარცხენა ველი კანის ბარათისთვის, პირველის უკან.
ეს ნიშნავს, რომ ჩვენ გვაქვს შესაძლებლობა დავამატოთ იმდენი კარტი, რამდენიც საჭიროა, რომელიც ყოველთვის იქნება რვა პიქსელის ტოლი.
ყველაფერი სასწაულებრივად მუშაობს მანამ, სანამ არ დაგვჭირდება შეკვეთა ბარათების ნაცვლად, რაღაც სხვა. კარგი, ვთქვათ, ღილაკი "ბარათის დამატება" ("ბარათის დამატება"):
CSS კოდის უკვე აშკარა ფრაგმენტიდან ვიმსჯელებთ, class.card ელემენტს ახალ ღილაკს არ მივანიჭებთ, რადგან ეს არ არის ბარათი. Ამაზე რას იტყვი? რატომ შევქმნათ class.add-card-ის დამატებითი სახელები, როგორ შევცვალოთ იგივე წესი ზღვრის სიმძლავრით, რომელიც არის class.card? არა, უფრო მეტი გამოსავალია.
ლობოტომიზებული ბუ * + *.
ისე, მსგავსია. მიუხედავად სასაცილო ასოციაციისა, ეს მეთოდი სასწაულებრივად მუშაობს და მას შემდეგ სტაბილურად ვიმარჯვებ, როცა გავიგე ჩემი ოცნების შესახებ. კაი, რა შუაშია ეს ყველაფერი? შეხედეთ შემდეგ CSS კოდს:
კონტეინერი (
padding: 16px;
}
/ * აბა, გაიგე ლობოტომიზებული ბუ? 😜 */
.კონტეინერი> * + * (
ზღვარი: 0 0 0 8px;
}
როგორც გახსოვთ, წინა სელექტორი მიმაგრებულია ბარათზე, რომელიც გადასცემს მეორე ბარათს. ახლა ამ დახმარებით ჩვენ შეგვიძლია ფორმატირება კანის ელემენტი, რომლის პირდაპირ არის სხვა ელემენტი, დაუყოვნებლივ ჩართეთ ღილაკი.
ჩანთაში.
დიდი იმედი მაქვს, რომ აქ პრეზენტაცია, მასალა დაგეხმარებათ გაერკვნენ, არის თუ არა ნიადაგი კონტეინერში შიდა შესასვლელების დალუქვის ნაცვლად და თუ მინდვრები.
როგორც გზამკვლევი, მინდა წარმოგიდგინოთ კალმის პროექტი, რომელიც ასახავს კონდახის მიმართულებას, ასევე საზოგადოების თვალში დამოწმებულ ორ წესს. ოჟე, ვიკორისთამო:
padding- კონტეინერსა და მის შინაარსს შორის არსებული ხარვეზებისთვის.
ზღვარი- ელემენტებს შორის ხარვეზებისთვის არის ელემენტები კონტეინერის შუაში.
19 ეპიზოდი
TL; DR:კულისებს მიღმა ხაზს ვუსვამ ველს ყველგან, გარდა წვეთებისა, თუ მაქვს ჩარჩო ან ფონი და მინდა გავზარდო სივრცე ამ ხილული ველის შუაში.
ყველაზე დიდი განსხვავება ზღვარსა და ზღვარს შორის მდგომარეობს იმაში, რომ ვერტიკალური მინდვრები ავტომატურად შეკუმშულია, მაგრამ ზღვარი არა.
მოდით შევხედოთ ორ ელემენტს, ერთი მეორის ზემოთ, გახსნით 1em. ამ წვდომას პატივს სცემს ელემენტის ნაწილი და შენარჩუნებულია მომავალში.
ამ გზით თქვენ ამოიღებთ პირველი ელემენტის ნაცვლად, რის შემდეგაც ცვლით პირველ ელემენტს, შემდეგ ამატებთ მეორეს და შემდეგ ცვლით სხვა ელემენტს.
ამრიგად, ამ ორი ელემენტის ნაცვლად ბოლო ჩანთაში იქნება 2 em 2 ელემენტზე.
ახლა შეცვალეთ ეს ჩანაწერი 1em ველით. მინდვრები ჩასმულია ელემენტების საზღვრებს შორის და მიმდებარე ელემენტების ველები გადაფარავს.
ამ გზით, ამ შემთხვევაში თქვენ ამოიღებთ პირველ ელემენტს, რასაც მოჰყვება კომბინირებული ველის 1em და შემდეგ სხვა ელემენტის ნაცვლად. ამრიგად, ამ ორი ელემენტის ადგილი მდებარეობს ხაზში 1 1em.
ეს შეიძლება კიდევ უფრო საინტერესო იყოს, თუ იცით, რისი თქმა გსურთ ელემენტებს შორის, მიუხედავად იმისა, რომელ ელემენტს გულისხმობთ.
დანარჩენი ორი დიდი უპირატესობა მდგომარეობს იმაში, რომ შეყვანა შედის ფონის/სურათის დაწკაპუნებად ზონაში და ფერში, ვიდრე ველში.
ყველაზე კარგი, მე ამას ავხსნი კონდახებით, დიაგრამებით და სიტყვებით "სცადე შენ თვითონ" - ეს.
ქვემოთ მოყვანილი დიაგრამა აძლევს შეხვედრას მისი ვალიდურობის ვიზუალურ მითითებას.
ერთი რამ უნდა აღინიშნოს, რომ ბრაუზერები, რომლებიც მიჰყვებიან სტანდარტებს (IE quirks - პრობლემა არ არის) აჩვენებს მხოლოდ გარკვეულ კონტენტს მოცემული სიგანით, ასე რომ გაითვალისწინეთ ეს განლაგების განლაგებაში. ასევე პატივისცემა გამოიჩინეთ მათ მიმართ, ვინც ხედავს Bootstrap 3-ის მხარდაჭერას ფანჯრის ჩარჩოში.
ზღვარი vs padding:
ზღვარი გამოითვლება ელემენტში ამ ელემენტსა და გვერდის სხვა ელემენტებს შორის სტენდის შესაქმნელად. შესასვლელის გაკეთებისთანავე აუცილებელია ადგილისა და ელემენტის კორდონს შორის უფსკრულის შექმნა.
ზღვარი არ არის ელემენტის ნაწილი, მაგრამ დამატებითი ნაწილი არის ელემენტის ნაწილი.
მეტი ტექნიკური ახსნა თქვენი კვების შესახებ, თუ თქვენ ეძებთ გზას, რომ იფიქროთ მინდვრებზე და დამატებით, რაც დაგეხმარებათ აირჩიოთ, თუ როგორ აირჩიოთ ისინი, რაც დაგეხმარებათ.
შეუთავსეთ ბლოკის ელემენტები კედელზე ჩამოსაკიდებელ სურათებს:
- ვიკნო ბრაუზერიკედელს ჰგავს.
- შინაარსიფოტოს მსგავსი.
- ზღვარიმსგავსი სივრცე ჩარჩოში ჩასმული სურათებს შორის.
- დამატებითიმსგავსია ფოტოსურათის მსგავსად.
- კორდონი ჩარჩო კორდონის მსგავსია.
როდესაც საქმე ეხება ყველაზე მნიშვნელოვან ინფორმაციას მინდვრებისა და შეყვანის შესახებ, მნიშვნელოვანია დაიცვას ცერის წესი ზღვარი, თუ თქვენს შეკვეთაში მოათავსებთ კედელზე სხვა გამოსვლების წინ მოთავსებულ ელემენტს და დამატებით. > როცა უსმენ გარეგანი სახეთავად ელემენტი. ზღვარი არ ცვლის ელემენტის ზომას, თუ არ შეიყვანთ 1-ზე დიდ ელემენტს.
1 ამ ფანჯრის მოდელის შეცვლა შესაძლებელია box-sizing ატრიბუტის გამოყენებით.
თუ არ არის ველები, მაშინ არ გჭირდებათ ფიქრი ელემენტის სიგანეზე.
სანამ თქვენ აძლევთ (padding: 10px;), თქვენ უნდა შეცვალოთ ელემენტის სიგანე 20 პიქსელი, შენახვა " ჯდება„და არ გაანადგუროთ მსგავსი ელემენტები.
ამიტომ ვიწყებ ბალიშების რედაქტირებას, რათა ამოიღო ყველაფერი „შეფუთული“, შემდეგ კი ველების რედაქტირება მცირე კორექტირებისთვის.
კიდევ ერთი რამ, რაც თქვენ უნდა იცოდეთ არის ის, რომლებშიც ბალიშები უფრო გიჟდებიან სხვადასხვა ბრაუზერში, І IE არ არის საკმარისი იმისათვის, რომ განთავსდეს უარყოფით ველებში.
HTML ღერძი გვიჩვენებს, თუ როგორ მოქმედებს padding და margin დაწკაპუნებაზე და ფონის შევსებაზე. ობიექტი ირჩევს დაწკაპუნებებს მის დამატებით ობიექტზე, მაგრამ აწკაპუნებს ობიექტის ზღვარზე, რათა გადავიდეს მამის ობიექტზე.
$ ("გარე"). დააწკაპუნეთ(function(e)(console.log("გარე"); e.stopPropagation();)); $ ("შიდა"). დააწკაპუნეთ(function(e)(console.log("inner"); e.stopPropagation();)); .გარე (შეფუთვა: 10 პიქსელი; ფონი: წითელი;) .შიდა (ზღვარი: 10 პიქსელი; შიგთავსი: 10 პიქსელი; ფონი: ლურჯი; საზღვარი: მყარი თეთრი 1 პიქსელი;)
ველები ასუფთავებენ ელემენტის გარშემო არსებულ ადგილს (საზღვრის პოზიციას), ხოლო დანამატი ასუფთავებს ადგილს ელემენტის გვერდით (საზღვრის შუაში).
ეს ნიშნავს, რომ თქვენმა ელემენტმა არ იცის მისი გარე კორდონების შესახებ, ასე რომ, თუ თქვენ ავრცელებთ კონტროლის დინამიურ ვებ ელემენტებს, გირჩევთ შეცვალოთ რეგისტრაციისა და ზღვრის შეძლებისდაგვარად.
გთხოვთ გაითვალისწინოთ, რომ ბევრჯერ გჭირდებათ ზღვრის შეცვლა.
CSS-ში არსებობს ორი გზა თქვენი ელემენტების გარშემო სივრცის შესაქმნელად: მინდვრები და ბალიშები. უმეტეს სცენარში, სუნი ფუნქციურად იდენტურია, მაგრამ, სინამდვილეში, ისინი, როგორც ჩანს, ცოტა განსხვავებულად იქცევიან. არსებობს მნიშვნელოვანი მოსაზრებები ველებსა და შეყვანას შორის, რომლებიც უნდა გაითვალისწინოთ, როდესაც არჩევთ, თუ რა უნდა გამოიყენოთ ელემენტების გვერდზე გადასატანად. დაიცავით, ამ სიტუაციებში, თუ რომელიმე სფეროს ან მიდგომის გამოყენება შესაძლებელია ერთი და იგივე ეფექტისთვის, გადაწყვეტილება ხშირად მცირდება სპეციალურ პირობებზე.
კოლის ვიკორისტუვატის ველები
გსურთ თქვენი ინტერვალი გამოჩნდეს საზღვრის ხელისუფლების მიერ შექმნილი ველის საზღვრებს გარეთ? მინდვრები კორდონების საზღვრებს მიღმა დევს, ასე რომ, თუ გინდათ, რომ თქვენი საზღვარი ერთ ადგილას დაიკარგოს, მათ ვიკორატორობ. ეს შეიძლება იყოს ცოტა ტკივილი, როგორც თქვენ გაქვთ, მაგალითად, სხივის პანელიჩარჩოთი, სადაც გსურთ გასვლა ძირითადი ზონიდან.
თქვენ არ გსურთ ფონის ფერი ან სურათები შემოიჭრას თქვენს განსაკუთრებულ სივრცეში. ფონის ფერებისურათები კი მოთავსებულია საზღვრებზე, ასე რომ თქვენ შეგიძლიათ შეინახოთ თქვენი ფონი სივრცეში, მუშაობისას, ველები - ძალაუფლებით, როგორც გსურთ.
თქვენ გინდათ დაუთმოთ სივრცე მხეცს და თქვენი ელემენტის ქვემოთ. ზედა და ქვედა ველები ქვედა ველებისგან განსხვავებულად არის აგებული, რადგან ორი ველი ერთზე დალაგებულია, ისინი გაფართოებულია ველების უდიდესი ნაკრების ზომამდე. მაგალითად, თუ ჩავსვამ აბზაცს ზედა ზღვარით 20 პიქსელი და ქვედა ზღვარი 15 პიქსელით, მე მექნება მხოლოდ 20 პიქსელი სივრცე აბზაცებს შორის (ორი ზღვარი გასწორდება ერთზე, და ყველაზე დიდი იმარჯვებს) .
კოლი ვიკორისტოვატი შუასადებები
ეს სიმძლავრე შეიძლება განსხვავდებოდეს ერთიდან რამდენიმე მნიშვნელობამდე.
სურათზე ღია ნაცრისფერი ფერი მიუთითებს იმ ზონაზე, რომლისთვისაც მითითებულია დამტენის ავტორიტეტი:
- მოთხოვნით რას ნიშნავს(5px 10px 15px 20px) - შიდა შესასვლელების მოწყობის თანმიმდევრობა შეურაცხმყოფელი იქნება: ზედა(5px) - უფლება(10px) - ქვედა(15px) - მარცხენა(20 პიქსელი). შიდა შესასვლელების ერთ ხმაში მოწყობის თანმიმდევრობის დასამახსოვრებლად შეგიძლიათ გამოიყენოთ ინგლისური სიტყვა TR ou ბ.ლ.ე (დე თ- ზედა, რ- მართალია, ბ- ქვედა, ლ- მარცხნივ).
- მოთხოვნით სამჯერადი მნიშვნელობა(5px 10px 15px) - შიდა შესასვლელების მოწყობის წესი შეურაცხმყოფელი იქნება: ზედა(5px) - მარჯვენა და მარცხენა(10px) - ქვედა(15px).
- მოთხოვნით ორი ღირებულება(5px 10px) - პირველი მნიშვნელობა (5px) დაადგენს შიდა ღიობის ზომას ზედა და ქვედა ნაწილში ელემენტის ნაცვლად, მეორე (10px) მნიშვნელობა დააყენებს შიდა გახსნას ზედა და მარჯვნივ ელემენტის ნაცვლად.
- მოთხოვნით ერთი ღირებულება(5px) - შიდა შესასვლელი ყველა მხრიდან იქნება იგივე ზომა - 5px.
ბრაუზერის მხარდაჭერა
ძალა
ოპერა
IExplorer
ზღვარიpadding 1.0
1.0
3.5
1.0
4.0
12.0
CSS სინტაქსი:
padding: "სიგრძე | საწყისი | მემკვიდრეობა"; JavaScript სინტაქსი:
Object.style.padding = "5px"
ძალაუფლების მნიშვნელობა
CSS ვერსია
CSS1 კლება
არა. ცხოველმყოფელი
Ისე. კონდახი wikiristannya
ელემენტის შეყვანა.
class="პრაიმერი">
მიირთვით რბილი ფრანგული რულონები და დალიეთ ჩაი.
მიირთვით რბილი ფრანგული რულონები და დალიეთ ჩაი.
მიირთვით რბილი ფრანგული რულონები და დალიეთ ჩაი.
Пример с нулевыми отступам (padding: 0px)Пример с одинаковым отступом от всех границ (padding: 10px)Пример с разными отступам (padding: 10px 0px 0px 30px)
Вот как это выглядит на странице:
Пример с нулевыми отступам (padding: 0px)
Пример с одинаковым отступом от всех границ (padding: 10px)
Пример с разными отступам (padding: 10px 0px 0px 30px)
Пример 2. Отступ объекта внутри объекта
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).
Рис. 1. Поле слева от текста
Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить поля только для указанных сторон.
Краткая информация
Синтаксис
padding: [<размер> | <проценты>] {1, 4}
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
Величину полей можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. При указании поля в процентах, значение считается от ширины родителя элемента.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
div { background: #e4efc7; padding: {{ playgroundValue }}px ; }
Пример
კონდახზე მოცემული წაკითხვის შედეგი ნახ. 2.
Პატარა 2. Zastosuvannya vlastivosti padding
ობიექტის მოდელი
ობიექტი.სტილი.შეფუთვა
სპეციფიკაცია
კანის სპეციფიკაცია გადის ანთების რამდენიმე ეტაპს.
- რეკომენდაცია - სპეციფიკაცია აფასებს W3C-ს და რეკომენდირებულია როგორც სტანდარტი.
- კანდიდატის რეკომენდაცია ( შესაძლო რეკომენდაცია) - ჯგუფი, რომელიც იცავს სტანდარტს, კმაყოფილია იმით, რომ იგი აკმაყოფილებს თავის მიზნებს, მაგრამ მოითხოვს სპეციალისტთა გუნდის დახმარებას სტანდარტის დანერგვაში.
- შემოთავაზებული რეკომენდაცია გაკეთდა რეკომენდაცია) - ამ ეტაპზე, W3C Advisory-ში წარდგენის დოკუმენტი ნარჩენი გამაგრებისთვის.
- სამუშაო პროექტი - პროექტის უფრო მომწიფებული ვერსია განხილვის შემდეგ და განხორციელდა ცვლილებები სისრულის უზრუნველსაყოფად.
- რედაქტორის მონახაზი ( სარედაქციო ჩერნეტკა) - სტანდარტის შავი ვერსია პროექტის რედაქტორების მიერ შეტანილი ცვლილებების შემდეგ.
- პროექტი ( იხვის სპეციფიკაცია) - სტანდარტის პირველი შავი ვერსია.
ბრაუზერები
ბრაუზერები
ბრაუზერის ცხრილს ექნება იგივე მნიშვნელობები.
ვგულისხმობ, ეს ძალიან მნიშვნელოვანი გაკვეთილია. ამ მოდიფიკაციის შემდეგ, შეგიძლიათ გააფართოვოთ ელემენტები გვერდით, დააყენოთ შესასვლელები მათ შორის, შექმნათ ისინი კონკრეტული ბლოკის შუაში და დააყენოთ ველები.
padding
padding არის ძალა, რომელიც ემსახურება ელემენტზე რიგი ველის დაყენებას კორდონის შიდა კიდიდან ადგილამდე. ამის ნაცვლად, შეიძლება არსებობდეს პირველადი ტექსტი, სურათი ან ბავშვის ელემენტი, რომელსაც ასევე შეუძლია შექმნას საკუთარი ველები.
ერთეულები შეიძლება იყოს პიქსელი (px) ან პროცენტი (%).
#ბლოკი (
padding: 12px; / * ბლოკის კორდონებიდან ადგილამდე შესვლა - ყველა მხრიდან იქნება 12 პიქსელი * /
}
მოედანზე შესვლა შესაძლებელია მხოლოდ ერთ მხარეს:
padding-top- ძალა, რომელიც ქმნის ველებს მხეცისთვის.
padding-მარჯვნივ- ძალა, რომელიც ქმნის ველებს მარჯვენა ხელით.
padding-ქვედა- ძალა, რომელიც ქმნის ქვემოთ მოცემულ ველებს.
padding-მარცხნივ- ძალა, რომელიც ქმნის ბოროტების ველებს.
#ბლოკი (
padding-bottom: 25px; / * ქვედა ზღვარი არის 25 პიქსელი * /
padding-მარცხნივ: 15px; / * მარცხენა ველი 15 პიქსელი * /
}
თუ აღნიშნეთ, რომ ამ გზით უნდა მიუთითოთ ველები 2 ან 3 მხარეს, დაინახავთ სხვა კოდს. რისთვისაც საჭიროა დენის ბალიშის ჩანაწერის შემცირება. მისი მეშვეობით მითითებულია ოთხივე მნიშვნელობა - კანის კიდიდან ერთ რიგში, ერთწლიანი რიგის უკან, ზემოდან დაწყებული:
Padding: TopIndent RightIndent IndentBottom IndentLeft;
#ბლოკი (
padding: 25px 10px 15px 6px; / * ზედა 25 პიქსელი, მარჯვნივ 10 პიქსელი, ქვედა 15 პიქსელი, მარცხენა 6 პიქსელი * /
}
ზღვარი
ზღვრის სიმძლავრე, ბალიშისგან განსხვავებით, ადგენს ზღვარის რაოდენობას სასაზღვრო ელემენტებს შორის.
თუ ელემენტი არის ბავშვი, მაშინ შესასვლელი ვრცელდება ელემენტის კორდონიდან მამის კორდონის შიდა კიდემდე.
როგორც ელემენტს ყოველდღიური მამა ჰყავს, მაშინ ავტორიტეტების დაწესებულება პატივს სცემს სხვა ელემენტების ჩარჩოს კიდეებამდე ფართო სივრცეს.
#ბლოკი (
ზღვარი: 4px;
}
წინა ქვეყნებიდან მიღებული მონაცემების ჩასართავად ხელმისაწვდომია შემდეგი ავტორიტეტები:
ზღვარი-ზედა- ძალა, რომელიც ქმნის მხეცის შესასვლელს.
ზღვარი-მარჯვნივ- ძალა, რომელიც ქმნის შესასვლელებს მარჯვნიდან.
ზღვარი-ქვედა- ძალა, რომელიც მოდის ქვემოდან.
ზღვარი-მარცხნივ- ძალა, რომელიც ქმნის ბოროტების აფეთქებებს.
შიგთავსის სიმძლავრის გარდა, ზღვარს ასევე აქვს შესაძლებლობა მოკლედ ჩაწეროს მნიშვნელობა სხვადასხვა მხარისთვის. რუხი მიჰყვება გოდინნიკის ისარს ზედა ველიდან:
ზღვარი: ზედა ზღვარი მარჯვენა ზღვარი ქვედა ზღვარი მარცხნივ;
#ბლოკი (
ზღვარი: 15px 10px 5px 25px; / * ზედა 15 პიქსელი, მარჯვნივ 10 პიქსელი, ქვედა 5 პიქსელი, მარცხენა 25 პიქსელი * /
}
გმადლობთ პატივისცემისთვის!
წინა განყოფილებაში ჩვენ ვიცოდით ისეთი CSS უფლებამოსილებების შესახებ, როგორიცაა ზღვარი და padding. ახლა მათ უფრო დეტალურად განვიხილავთ და გადავხედავთ, როგორ განსხვავდებიან ისინი ერთმანეთისგან და რა თვისებები აქვთ.
თქვენ შეგიძლიათ შექმნათ ხარვეზები ელემენტებს შორის ამა თუ იმ გზით, მაგრამ padding ნიშნავს გაფართოებას ერთი ბლოკიდან მეორეზე, ბლოკებს შორის სივრცეში. წაკითხვის ეკრანის სურათზე წინა კონდახი:
padding ამატებს სივრცეს ბლოკებს შორის, ხოლო ზღვარი ქმნის ხარვეზებს ბლოკებს შორის
როგორც ხედავთ, მინდვრები და CSS შეყვანაისინი არ ეთანხმებიან ერთმანეთს, თუმცა ზოგჯერ კოდექსის დათვალიერების გარეშე შეუძლებელია იმის დადგენა, თუ რომელი უფლებამოსილება ენიჭებათ მათ. ეს იკარგება ამ სიტუაციებში, თუ ბლოკის ჩარჩო ან ფონი შეიცვალა.
CSS-ში მინდვრების ან შეყვანის დასაყენებლად ელემენტის კანის მხარეს, თქვენ გაქვთ შემდეგი კონტროლი:
შეიყვანეთ:
- padding-top: მნიშვნელობა;
- padding-right: მნიშვნელობა;
- padding-bottom: მნიშვნელობა;
- padding-left: მნიშვნელობა;
სფეროები:
- margin-top: მნიშვნელობა;
- margin-right: მნიშვნელობა;
- ზღვარი-ქვედა: მნიშვნელობა;
- მარგი-მარცხნივ: მნიშვნელობა;
მნიშვნელობები შეიძლება მითითებული იყოს ნებისმიერ CSS ერთეულში - px, em, %, და ა.შ. მაგალითი: margin-top: 15px.
ლაპარაკი ასევე ძალიან ადვილია სტენოგრაფიული ჩანაწერის ზღვარი და padding CSS. თუ თქვენ გჭირდებათ ველების ან შეყვანის დაყენება ელემენტის ოთხივე მხარისთვის, აბსოლუტურად აუცილებელია ცალ-ცალკე ჩაწეროთ სიმძლავრე კანის მხარისთვის. ყველაფერი უფრო მარტივია: ზღვრისთვის და ბალიშისთვის შეგიძლიათ მიუთითოთ 1, 2, 3 ან 4 მნიშვნელობა. მნიშვნელობების რაოდენობა დამოკიდებულია იმაზე, თუ როგორ არის განაწილებული პარამეტრები:
- 4 მნიშვნელობა: შეყვანები დაყენებულია ელემენტის ყველა მხარეს შემდეგი თანმიმდევრობით: წინა, მარჯვენა, ქვედა, მარცხენა: padding: 2px 4px 5px 10px;
- 3 მნიშვნელობა: padding დაყენებულია ზედა მხარეს, შემდეგ ერთდროულად მარცხენა და მარჯვენა, და შემდეგ ქვედა: padding: 3px 6px 9px;
- 2 მნიშვნელობა: წინა მხარე დაყენებულია ერთსა და იმავე დროს ზედა და ქვედა მხარეებისთვის, შემდეგ კი ერთდროულად მარცხენა და მარჯვენა: padding: 6px 12px;
- 1 მნიშვნელობა: ელემენტის ყველა მხარისთვის დაყენებულია იგივე padding: padding: 3px;
იგივე წესები ვრცელდება და ძალაუფლების ზღვარი CSS. ყურადღება მიაქციეთ იმ ფაქტს, რომ ზღვრისთვის შეგიძლიათ გამოიყენოთ უარყოფითი და უარყოფითი მნიშვნელობები (მაგალითად, -3px), რაც ზოგიერთ შემთხვევაში შეიძლება კიდევ უფრო უარესი იყოს.
ზღვრის კოლაფსი
განვიხილოთ სიტუაცია: ორი ბლოკის ელემენტი განლაგებულია ერთმანეთის ზემოთ და ისინი აკონკრეტებენ ზღვრის ველს. ზედა ბლოკი დაყენებულია ზღვარზე: 60 პიქსელი, ხოლო ქვედა ბლოკი დაყენებულია ზღვარზე: 30 პიქსელი. ლოგიკური იქნება ვივარაუდოთ, რომ ორ ელემენტს შორის ორი ველი უბრალოდ შეეჯახება და ბლოკებს შორის უფსკრული იქნება 90 პიქსელის ტოლი.
თუმცა, მოდი სხვაგვარად წავიდეთ. სინამდვილეში, ასეთ სიტუაციაში, ჩნდება ეფექტი, რომელსაც ეწოდება drop-off, როდესაც ელემენტების ორი მიმდებარე ველიდან არის ყველაზე დიდი ზომის შერჩევა. ჩვენს აპლიკაციაში ელემენტებს შორის სივრცე 60 პიქსელის ტოლი იქნება.
დადექით ერთი დიდი ღირებულების ბლოკებს შორის
ზღვრის კოლაფსი ვრცელდება მხოლოდ ელემენტების ზედა და ქვედა მინდვრებზე და არ ვრცელდება მარჯვენა და მარცხენა მხარეს მინდვრებზე. უფსკრულის ნარჩენი ღირებულება განსხვავდება სხვადასხვა სიტუაციებში:
- თუ ზღვრის მნიშვნელობა დადებითია, ზღვრის ზომა იქნება უფრო დიდი მნიშვნელობის ტოლი.
- თუ ერთ-ერთი მნიშვნელობა უარყოფითია, მაშინ ველის ზომის გამოსათვლელად საჭიროა გამოკლოთ მნიშვნელობის ჯამი. მაგალითად, 20px და -18px მნიშვნელობებით, ველის ზომა იქნება ტოლი:
20 + (-18) = 20 - 18 = 2 პიქსელი. - თუ მნიშვნელობა უარყოფითია, შეადარეთ ამ რიცხვების მოდული და შეარჩიეთ რიცხვი, რომელიც უფრო დიდია მოდულში (ასევე მცირეა ვიდრე უარყოფითი რიცხვები). მაგალითი: თქვენ უნდა დაარეგულიროთ ზღვრის მნიშვნელობები -6px და -8px. ტოლი რაოდენობის მოდულები ტოლია 6 და 8 სტრიქონზე. ვარსკვლავი ანათებს 6-8-ზე. ველის ქვეჩანთის ზომაა -8 პიქსელი.
- როდესაც მნიშვნელობები მითითებულია სხვადასხვა CSS ერთეულში, ისინი ჩამოთვლილია ერთზე, რის შემდეგაც ხდება მათი გათანაბრება და არჩეულია უფრო დიდი მნიშვნელობა.
- ბავშვის ელემენტების ზღვრის ზომა განისაზღვრება კიდევ უფრო: თუ ზედა ნაწილს აქვს უფრო დიდი ზღვარი, ვიდრე ქვედა, მაშინ პრიორიტეტი ენიჭება ამ ელემენტს. ამ შემთხვევაში, მამის ზედა და ქვედა ველების ზომები გახდება იგივე, რაც მითითებულია სადესანტოში. ვისთანაც არ იქნება დგომა მამასა და დანარჩენებს შორის.
დღეს ჩვენ ვიმუშავებთ განსხვავებაზე HTML padding-ს შორის ( შიდა წვდომა) I margin (გარე შეყვანა) CSS-ში. დავიწყოთ მათი სინტაქსით. ამ ავტორიტეტების ჩაწერის რამდენიმე გზა არსებობს: ძირითადი და შემოკლებული:
padding და Margin CSS-ში
განხილული ავტორიტეტების დაწერის ორიგინალური ფორმა უფრო ადვილი გასაგებია, რადგან ის მსგავსია ყველა სხვა წერის სტილთან:
ზვიჩაინას ჩანაწერი:
padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-მარცხნივ: 20px;
მეორეს მხრივ, სტენოგრამის ჩანაწერი CSS-ში აერთიანებს მთელ ძალას ერთ ძლიერ ძალაში: „padding“.
მოკლე შენიშვნა:
padding: 10px 20px 40px 10px;
ბალიშს და ზღვარს აქვს ოთხი მნიშვნელობა: ზედა, მარჯვენა, ქვედა და მარცხენა. ზემოთ ნაჩვენები შემოკლებულ ჩანაწერებში მითითებულია იგივე მნიშვნელობები, დამატებულია ერთი ტიპის სივრცე. ჯერ, რამდენიმე მნიშვნელობით, წვდომა მხეცზე, შემდეგ წვდომა მარჯვნივ, ქვედა (ქვედა HTML) და ბოროტზე:
ბალიშები: TOP RIGHT BOTTOM LEFT; (შეფუთვა: ქვემოთ მარჯვნივ მდებარე მხეცი ბოროტია)
ეს ჩანაწერი შეიძლება შემცირდეს სამ მნიშვნელობამდე, თუმცა მარცხენა და მარჯვენა ბალიშები / ზღვარი იგივეა. მაგალითად, თუ ზედა ზღვარი არის 30 პიქსელი, მარცხენა და მარჯვენა არის 10 პიქსელი, ხოლო ქვედა არის 40 პიქსელი, მაშინ შეგიძლიათ დააკონფიგურიროთ შესვლის ფორმა:
padding: 30px 10px 40px;
მალე ორჯერ იქნება!
ვინაიდან ზედა და ქვედა ბალიშები / ზღვარი ერთნაირია, ხოლო მარჯვენა და მარცხენა ბალიშები / ზღვარი იგივეა, შეგიძლიათ მხოლოდ ორი მნიშვნელობის მითითება. ამ შემთხვევაში, ზედა და ქვედა მინდვრები არის 10 პიქსელი, ხოლო მარცხენა და მარჯვენა მინდვრები არის 20 პიქსელი. ჩვენი CSS ასე გამოიყურება:
ბალიშები: TOP / BOTTOM RIGHT / LEFT; (შეფუთვა: ზედა / ქვედა მემარჯვენე / მარცხენა) padding: 10px 20px;
მხოლოდ ერთი მნიშვნელობა!
ჩვენი ძველი ვერსიაშემცირებული ჩანაწერი padding და margin HTML შეიცავს მხოლოდ ერთ მნიშვნელობას. ამ ჩანაწერის ვიკორიზაცია შესაძლებელია, თუ ყველა ჩანაწერი ხელმისაწვდომია ( მხეცი, ქვემოთ, მემარჯვენე და მემარცხენე) იგივე მნიშვნელობები ჩნდება. თუ გვინდოდა, რომ ყველა მხარეს ჰქონდეს 20 პიქსელის მცირე მინდვრები, მაშინ CSS ასე გამოიყურება:
რა ფორმატი გამოვიყენო Vikory პოსტისთვის? მაგალითად, თუ ელემენტს უნდა მივცე მხოლოდ ქვედა ზღვარი, მე შევცვლი ორიგინალურ ჩანაწერს, რადგან წონა უნდა დავაყენო მხოლოდ ერთ მხარეს: padding-bottom: 30px;
როგორ გავუმკლავდეთ PADDING-სა და MARGIN-ს
ამ ორ ხელისუფლებას შორის შესამჩნევი განსხვავებაა. padding გამოიყენება სივრცის დასამატებლად HTML ელემენტის კონტეინერის შუაში. ზღვარი გამოიყენება ელემენტების გარე კორდონთან სივრცის შესაქმნელად.
გააცნობიერე, რომ შიგთავსი ზამთრის ქურთუკს გაწყობს. ქურთუკი შენი ნაწილია, მაგრამ მე რომ დაგესროლო, ქვედა ზემოდან დავფარავდი, თითქოს შენი ქურთუკი არ გეცვას.
თქვენ ასევე შეგიძლიათ იფიქროთ ბალიშზე, როგორც მუყაოს კოლოფში არსებულ ნივთებზე. თუ ყუთს მოათავსეთ პოლისტიროლის ქაფით, დააჭირეთ მას ყუთის კიდეებს. CSS-ში padding იგივეა.
ახლა იფიქრეთ ზღვარზე, როგორც თქვენს გარშემო არსებულ უხილავ ძალის ველზე. ძალის ველი იცავს სხვა მეტყველებას თქვენგან. ქურთუკით და ქურთუკით კონდახისკენ შემობრუნდა, თითქოს ქურთუკი მოგაყარა და ძალის ველში გავლა შეძლებდა, მაშინ დაფარავდა მხოლოდ შენ და შენს ქურთუკს, როგორც ადრე.
PADDING და MARGIN განაცხადის საიტზე
მოდით შევხედოთ ავტორიტეტებს კონდახებზე ელემენტებით. მოდით ვისაუბროთ აბზაცზე (ტეგ
), შემდეგ ახალ ფერს დავამატებთ ფონს და დავამატებთ 30 პიქსელის ზღვარს კანის მხრიდან.
ქვემოთ ხედავთ, რომ მის გვერდით არის აბზაცი 30 პიქსელით. მარჯვნივ სურათზე გამოვიყენე ხელსაწყოები გუგლ ქრომიიმის ჩვენება, თუ სად იწყება/მთავრდება HTML შიგთავსი რომელი ელემენტისთვის. მწვანე ფერიქვემოთ მოცემულ სურათზე არის საფენი, რომელიც მოთავსებულია კონტეინერის გარშემო. ფონის მუქი ლურჯი ფერი შეავსებს შიდა არეალს:
ახლა დაამატეთ ზღვარი აბზაცს. მე დავამატებ 30 პიქსს წინა და ქვედა მხარეს, ასევე 20 პიქსს მარცხნივ და მარჯვნივ. ქვემოთ მოყვანილი სურათი გვიჩვენებს, თუ როგორ შეიცვალა ეს აბზაცი ზღვრიდან. სურათის რეალური სიგანე უფრო მცირე გახდა, რადგან ზღვარი მორგებულია საზღვრებთან შესატყვისად HTML ელემენტი. მარჯვნივ ხედავთ, რომ ნარინჯისფერი ფერი არის ელემენტის გარშემო არსებული ზღვარი. ზღვარი ყოველთვის მდებარეობს ბალიშის უკან და მუქი ლურჯი ფონი არ არის გაშლილი მინდვრის ზონაზე:
თუ აქამდე დაბნეული იყავით, თითქოს HTML-ის შიგთავსის და ზღვრის ამოცნობას ცდილობდით, ექსპერიმენტების დროა! რაც უფრო მეტად ეწინააღმდეგებით CSS-ის ძალას და შეცვლით მათ მნიშვნელობებს, მით უფრო მეტად მიხვდებით, თუ როგორ მუშაობენ ისინი.
სტატისტიკის თარგმანი" CSS padding VS. ზღვარი და როგორ გამოვიყენოთ ისინი„მეგობრული გუნდი ემზადებოდა პროექტისთვის.
კარგი ცუდია
- სახელმძღვანელო
ეს სტატიები არ ართულებს მარტივ მეტყველებას, მაგრამ ხაზს უსვამს საერთო სტანდარტების პატივისცემას, რომლებიც ხშირად დავიწყებულია. მნიშვნელოვანია იმის უზრუნველყოფა, რომ სტრუქტურა გააზრებული იყოს განლაგების ყველა ასპექტში და არანაკლებ მნიშვნელოვანია მისი დაცვა შესავალში. და განლაგების ერთ-ერთი მთავარი პრინციპია სითხე. და თქვენ შეგიძლიათ მარტივად შეიტანოთ ნებისმიერი ცვლილება და არ გააფუჭოთ არაფერი. ჯენას შესახებზღვარი და ბალიშები ამ საკითხში ძალიან მნიშვნელოვან როლს თამაშობენ.
ნაკლებად გადატვირთული პრინციპები აისახება გვერდზე ელემენტების შუა პოზიციაზე. ასევე შესაძლებელია დეკორატიული ელემენტების შერწყმა. ალე არც ისე კატეგორიულია.
Ძირითადი პრინციპები:
- შესასვლელი დაყენებულია ჯიხურში დარჩენილ შესაძლო ელემენტზე.
- შეყვანები შეიძლება განისაზღვროს დამოუკიდებელი ელემენტებისთვის (BEM ბლოკი).
- ჯგუფის დარჩენილი ელემენტისთვის, შეყვანა აღდგება ნულამდე (ამიერიდან).
შესასვლელები წინა ელემენტიდან წინ მიდის.
ზღვარი(ები) დაყენებულია წინა ელემენტიდან წინა ელემენტამდე, პირველი ელემენტიდან მეორემდე, ქვევით, მარცხნიდან მარჯვნივ.
ეს ნიშნავს, რომ ასეთი ხელისუფლება margin-left და margin-top არ არის ვიკორიზებული(დადანაშაულების გარეშე). ბალიშით კეთდება ყველა წვრილმანი (გარდა იმისა, რომ იგი გამოიყენება დეკორატიული მიზნებისთვის, გაგზავნის არეალის გასაზრდელად და ა.შ.). თუ ბლოკი მოითხოვს წვდომას მხეცთან ან ბოროტთან, ის იქნება აღებული ბალიშის ზედა და ბალიშის მარცხენა ნაწილებისთვის.
პირდაპირ გადადით ხეების ჯიხურების ნაკადთანბლოკი თავისთავად არ მუშაობს.
თირკმელი სტატიკურ მდგომარეობაშია და ნებისმიერი შემოდინება შორდება სხვის სტრუქტურას.
შესასვლელი დაყენებულია ჯიხურში დარჩენილ შესაძლო ელემენტზე
margin(s) განსაზღვრავს მხოლოდ ხის ყუთების სასაზღვრო ელემენტებს.აპლიკაციას აქვს 3 სია, შემდეგი სტრუქტურით:
- შორს, შორს, ვერბალურს მიღმა.
წვდომა უნდა შეეცადოს არა დამხმარე ელემენტების სტრუქტურისთვის, არამედ დაქვემდებარებული ელემენტების სტრუქტურისთვის.
ეს სიტუაცია.main-section__item ასევე მოიცავს დანარჩენს, ვისაც შეუძლია მიეცეს წვდომა სიების გაყოფაზე. იგივე ეფექტის მიღწევა შესაძლებელია, თუ გსურთ მიიღოთ წვდომა სიაზე, ჭარბი, გაგზავნილი და ა.შ.
ამ კონდახის დასრულება ადვილია. თუ გსურთ იხილოთ ბევრად მეტი ინვესტიცია, შეგიძლიათ გამოიყენოთ მონაცემები, თუ ზოგიერთი მარგინემი დაიშლება. და იცოდეთ ბალიშების შესახებ.
სათაური შვიდი სიტყვისგან შემდგარ განყოფილებაში
თუ მაგალითს აიღებთ სათაურთან ერთად, თქვენ უნდა შექმნათ წვდომა სათაურისთვის მხეცზე. შემდეგ დარჩენილი ელემენტი იქნება განყოფილება და ამისთვის padding-top, ზღვარი (და), რომელიც უნდა გადატვირთოს ნაგულისხმევად, უნდა გადატვირთოს.
ამ პრინციპის დაცვის უმარტივესი მიზეზი არის ის, რომ გაგიადვილდეთ მომავალში მიდგომის ცოდნა, ან თქვენთვის ან მათთვის, ვინც მომავალში იმუშავებს თქვენს განლაგებით. ასე ამბობენ ხელნაკეთობაზე.
დაკავშირებული პრობლემები შეიძლება წარმოიშვას, თუ შეყვანის ცუდი სტრუქტურის მქონე განლაგება ნაჩვენებია დინამიურად ან დუბლირებული.
შეყვანები შეიძლება განისაზღვროს დამოუკიდებელი ელემენტებისთვის (BEM ბლოკი)
არასოდეს ჩაერიოთ ელემენტების შეყვანაში, რომლებიც შეიძლება დაზიანდეს არაერთხელ. თუმცა, თუ არ ხართ კმაყოფილი მეთოდოლოგიით, ისარგებლეთ პერსპექტივით. ვისთვისაც დამწვარია. დამწვრობა კარგია. ან დამატებითი გაკვეთილები.თუ თქვენ გჭირდებათ წვდომის ბლოკის შექმნა. დახმარების თხოვნა არაფერ შუაშია:
- ელემენტში ჩავარდნა (რადგან ეს ბლოკი არ იქნება ამოღებული ელემენტიდან, არ იქნება წვდომა და ის უბრალოდ შეიძლება განთავსდეს სხვა ადგილას).
- კლასში დამატება (შეგიძლიათ შექმნათ ბლოკი ელემენტით).
- დამწვარი (ბლოკად, როლით, მხოლოდ პოზიციაში).
ჯგუფის დარჩენილი ელემენტისთვის, შეყვანა აღდგება ნულამდე (ამიერიდან)
მაგალითად ავიღოთ სია და სურათები.ეს ჰორიზონტალური მენიუდა ლოგო (რომელიც არის მარჯვენა).
დარჩენილი li-სთვის, ჩანაწერი აღდგება ნულამდე. შესვლის მეშინია გემის ელემენტებს შორის ul და img. რა დაემართა სხვა პრინციპს.
ავიღოთ კიდევ ერთი მაგალითი:
...
10.10.10დააწკაპუნეთ ჩვენზე, რათა შეხვიდეთ ახალ ელემენტებზე, როგორც specified.blog-preview__item (ზღვარი-ქვედა: 20px;). დარჩენილი ზღვარი გადატვირთულია ნულამდე, ხოლო ქვედა ჩანაწერი ჩანაცვლებულია ბლოგის გადახედვის ჩანართით. რა დაემართა სხვა პრინციპს.
უფრო ხშირად სხვა ფსევდო კლასები უნდა გამოსწორდეს: ბოლო შვილი.
ელემენტი: არა (: ბოლო შვილი) (ზღვარი-ქვედა: 20 პიქსელი;) // ან // .პუნქტი (// სხვა სტილები // ზღვარი-ქვედა: 20 პიქსელი; &: ბოლო-შვილი (ზღვარი-ქვედა: 0;) ) // ან margin-top, მთავარი იდეა აქ, არა პირდაპირ Margin, არამედ სპეციფიკურობით // .item + .item (margin-top: 20px;) // ან // .item (// სხვა სტილის / / & + & (ზღვარი ზედა: 20 პიქსელი;))
ბრალი
რა თქმა უნდა, არის განსხვავებები, არა ტრივიალური მოთხოვნები და ნიუანსები, რომლებშიც შეუძლებელია ამ პრინციპების დაცვა და სხვაგვარად მიისწრაფოდეს იდეალური მონაცემების მიღწევაში, რათა შეიქმნას განლაგება რაც შეიძლება სუფთა.
P.S.რაჯუ გაეცანით პუბლიკაციას
ძერელო: ზღვარი თუ ბალიშები?
ფილიპ სპორერი.
თარგმანი: vl49.
რა მნიშვნელობა აქვს ამ მეთოდით ფორმატირებას?
დიდი ხანია ვიტანჯები მსგავსი ტიპის მტკიცებულებების ძიებაში. და ბევრი გაუმაძღარი, გაუგებარი CSS კოდის დაწერის შემდეგ, რომელსაც თან ახლავს სხვადასხვა გვერდითი მოვლენები, შემიძლია სიამოვნებით ვთქვა, რომ აღმოვაჩინე საკვების მოპყრობის ძირითადი წესები.
უფრო ზუსტად, დავუბრუნდეთ ტიპიურ სიტუაციას, რომელიც ყველაზე კარგად ცნობილია ყველასთვის, ვინც იცის 2017 წელს კომპიუტერისთვის შექმნილი ინტერფეისი. ეს არის უმარტივესი ბარათის შაბლონი.
ამ აპლიკაციაში შეგიძლიათ იხილოთ ორი ტიპის ინტერვალი:
აქ ძალიან მნიშვნელოვანია გვესმოდეს, რომ ჩვენ გვაქვს ორი განსხვავებული ცნება, რომლებიც, როდესაც ერთად იკრიბებიან, სულაც არ არის ერთმანეთთან დაკავშირებული. თუ მე მჭირდება ბარათებსა და მათ კონტეინერს შორის მანძილის შეცვლა, მაგალითად, 24 პიქსელამდე, მაშინ არ არის საჭირო თავად ბარათებს შორის მანძილის დამატება.
კონდახის დანერგვა დამატებითი CSS-ის გამოყენებით?
ასეთი შაბლონის შექმნის ფაქტიურად ათასობით გზა არსებობს მინდვრების და შიდა შეყვანის გამოყენებით, მაგრამ მე მინდა თქვენს ყურადღებას წარმოგიდგინოთ ერთ-ერთი მათგანი, რომელიც აჩვენებს ზღვრისა და ბალიშის უფლებამოსილებების სწორ გამოყენებას. უფრო მეტიც, ეს მეთოდი საშუალებას გაძლევთ მოგვიანებით დაამატოთ სხვა ბარათები.
კონტეინერი (
padding: 16px;
}
.ბარათი + .ბარათი (
ზღვარი: 0 0 0 8px;
}
საერთო ჯამში, 2 სელექტორი და 2 წესი.
რომელი ფუნქცია აღინიშნება პლუსის ნიშნით?
სიმბოლო + თვითონ არის ჯამის ამომრჩეველი. ეს განსაზღვრავს მხოლოდ ელემენტს ამ სელექტორის წინ მითითებულ ელემენტის შემდეგ.
როგორც ზემოთ მოყვანილი სურათიდან ჩანს, ჩვენს ფანჯარაში შეირჩევა დამატებითი სელექტორი კანის ბარათი, რომელიც გადაიცემა ნებისმიერი სხვა ბარათით. ამ გზით, ფულის სელექტორის დახმარებით, შეგვიძლია დავაყენოთ მარცხენა ველი კანის ბარათისთვის, პირველის უკან.
ეს ნიშნავს, რომ ჩვენ გვაქვს შესაძლებლობა დავამატოთ იმდენი კარტი, რამდენიც საჭიროა, რომელიც ყოველთვის იქნება რვა პიქსელის ტოლი.
ყველაფერი სასწაულებრივად მუშაობს მანამ, სანამ არ დაგვჭირდება შეკვეთა ბარათების ნაცვლად, რაღაც სხვა. კარგი, ვთქვათ, ღილაკი "ბარათის დამატება" ("ბარათის დამატება"):
CSS კოდის უკვე აშკარა ფრაგმენტიდან ვიმსჯელებთ, class.card ელემენტს ახალ ღილაკს არ მივანიჭებთ, რადგან ეს არ არის ბარათი. Ამაზე რას იტყვი? რატომ შევქმნათ class.add-card-ის დამატებითი სახელები, როგორ შევცვალოთ იგივე წესი ზღვრის სიმძლავრით, რომელიც არის class.card? არა, უფრო მეტი გამოსავალია.
ლობოტომიზებული ბუ * + *.
ისე, მსგავსია. მიუხედავად სასაცილო ასოციაციისა, ეს მეთოდი სასწაულებრივად მუშაობს და მას შემდეგ სტაბილურად ვიმარჯვებ, როცა გავიგე ჩემი ოცნების შესახებ. კაი, რა შუაშია ეს ყველაფერი? შეხედეთ შემდეგ CSS კოდს:
კონტეინერი (
padding: 16px;
}
/ * აბა, გაიგე ლობოტომიზებული ბუ? 😜 */
.კონტეინერი> * + * (
ზღვარი: 0 0 0 8px;
}
როგორც გახსოვთ, წინა სელექტორი მიმაგრებულია ბარათზე, რომელიც გადასცემს მეორე ბარათს. ახლა ამ დახმარებით ჩვენ შეგვიძლია ფორმატირება კანის ელემენტი, რომლის პირდაპირ არის სხვა ელემენტი, დაუყოვნებლივ ჩართეთ ღილაკი.
ჩანთაში.
დიდი იმედი მაქვს, რომ აქ პრეზენტაცია, მასალა დაგეხმარებათ გაერკვნენ, არის თუ არა ნიადაგი კონტეინერში შიდა შესასვლელების დალუქვის ნაცვლად და თუ მინდვრები.
როგორც გზამკვლევი, მინდა წარმოგიდგინოთ კალმის პროექტი, რომელიც ასახავს კონდახის მიმართულებას, ასევე საზოგადოების თვალში დამოწმებულ ორ წესს. ოჟე, ვიკორისთამო:
padding- კონტეინერსა და მის შინაარსს შორის არსებული ხარვეზებისთვის.
ზღვარი- ელემენტებს შორის ხარვეზებისთვის არის ელემენტები კონტეინერის შუაში.
19 ეპიზოდი
TL; DR:კულისებს მიღმა ხაზს ვუსვამ ველს ყველგან, გარდა წვეთებისა, თუ მაქვს ჩარჩო ან ფონი და მინდა გავზარდო სივრცე ამ ხილული ველის შუაში.
ყველაზე დიდი განსხვავება ზღვარსა და ზღვარს შორის მდგომარეობს იმაში, რომ ვერტიკალური მინდვრები ავტომატურად შეკუმშულია, მაგრამ ზღვარი არა.
მოდით შევხედოთ ორ ელემენტს, ერთი მეორის ზემოთ, გახსნით 1em. ამ წვდომას პატივს სცემს ელემენტის ნაწილი და შენარჩუნებულია მომავალში.
ამ გზით თქვენ ამოიღებთ პირველი ელემენტის ნაცვლად, რის შემდეგაც ცვლით პირველ ელემენტს, შემდეგ ამატებთ მეორეს და შემდეგ ცვლით სხვა ელემენტს.
ამრიგად, ამ ორი ელემენტის ნაცვლად ბოლო ჩანთაში იქნება 2 em 2 ელემენტზე.
ახლა შეცვალეთ ეს ჩანაწერი 1em ველით. მინდვრები ჩასმულია ელემენტების საზღვრებს შორის და მიმდებარე ელემენტების ველები გადაფარავს.
ამ გზით, ამ შემთხვევაში თქვენ ამოიღებთ პირველ ელემენტს, რასაც მოჰყვება კომბინირებული ველის 1em და შემდეგ სხვა ელემენტის ნაცვლად. ამრიგად, ამ ორი ელემენტის ადგილი მდებარეობს ხაზში 1 1em.
ეს შეიძლება კიდევ უფრო საინტერესო იყოს, თუ იცით, რისი თქმა გსურთ ელემენტებს შორის, მიუხედავად იმისა, რომელ ელემენტს გულისხმობთ.
დანარჩენი ორი დიდი უპირატესობა მდგომარეობს იმაში, რომ შეყვანა შედის ფონის/სურათის დაწკაპუნებად ზონაში და ფერში, ვიდრე ველში.
ყველაზე კარგი, მე ამას ავხსნი კონდახებით, დიაგრამებით და სიტყვებით "სცადე შენ თვითონ" - ეს.
ქვემოთ მოყვანილი დიაგრამა აძლევს შეხვედრას მისი ვალიდურობის ვიზუალურ მითითებას.
ერთი რამ უნდა აღინიშნოს, რომ ბრაუზერები, რომლებიც მიჰყვებიან სტანდარტებს (IE quirks - პრობლემა არ არის) აჩვენებს მხოლოდ გარკვეულ კონტენტს მოცემული სიგანით, ასე რომ გაითვალისწინეთ ეს განლაგების განლაგებაში. ასევე პატივისცემა გამოიჩინეთ მათ მიმართ, ვინც ხედავს Bootstrap 3-ის მხარდაჭერას ფანჯრის ჩარჩოში.
ზღვარი vs padding:
ზღვარი გამოითვლება ელემენტში ამ ელემენტსა და გვერდის სხვა ელემენტებს შორის სტენდის შესაქმნელად. შესასვლელის გაკეთებისთანავე აუცილებელია ადგილისა და ელემენტის კორდონს შორის უფსკრულის შექმნა.
ზღვარი არ არის ელემენტის ნაწილი, მაგრამ დამატებითი ნაწილი არის ელემენტის ნაწილი.
მეტი ტექნიკური ახსნა თქვენი კვების შესახებ, თუ თქვენ ეძებთ გზას, რომ იფიქროთ მინდვრებზე და დამატებით, რაც დაგეხმარებათ აირჩიოთ, თუ როგორ აირჩიოთ ისინი, რაც დაგეხმარებათ.
შეუთავსეთ ბლოკის ელემენტები კედელზე ჩამოსაკიდებელ სურათებს:
- ვიკნო ბრაუზერიკედელს ჰგავს.
- შინაარსიფოტოს მსგავსი.
- ზღვარიმსგავსი სივრცე ჩარჩოში ჩასმული სურათებს შორის.
- დამატებითიმსგავსია ფოტოსურათის მსგავსად.
- კორდონი ჩარჩო კორდონის მსგავსია.
როდესაც საქმე ეხება ყველაზე მნიშვნელოვან ინფორმაციას მინდვრებისა და შეყვანის შესახებ, მნიშვნელოვანია დაიცვას ცერის წესი ზღვარი, თუ თქვენს შეკვეთაში მოათავსებთ კედელზე სხვა გამოსვლების წინ მოთავსებულ ელემენტს და დამატებით. > როცა უსმენ გარეგანი სახეთავად ელემენტი. ზღვარი არ ცვლის ელემენტის ზომას, თუ არ შეიყვანთ 1-ზე დიდ ელემენტს.
1 ამ ფანჯრის მოდელის შეცვლა შესაძლებელია box-sizing ატრიბუტის გამოყენებით.
თუ არ არის ველები, მაშინ არ გჭირდებათ ფიქრი ელემენტის სიგანეზე.
სანამ თქვენ აძლევთ (padding: 10px;), თქვენ უნდა შეცვალოთ ელემენტის სიგანე 20 პიქსელი, შენახვა " ჯდება„და არ გაანადგუროთ მსგავსი ელემენტები.
ამიტომ ვიწყებ ბალიშების რედაქტირებას, რათა ამოიღო ყველაფერი „შეფუთული“, შემდეგ კი ველების რედაქტირება მცირე კორექტირებისთვის.
კიდევ ერთი რამ, რაც თქვენ უნდა იცოდეთ არის ის, რომლებშიც ბალიშები უფრო გიჟდებიან სხვადასხვა ბრაუზერში, І IE არ არის საკმარისი იმისათვის, რომ განთავსდეს უარყოფით ველებში.
HTML ღერძი გვიჩვენებს, თუ როგორ მოქმედებს padding და margin დაწკაპუნებაზე და ფონის შევსებაზე. ობიექტი ირჩევს დაწკაპუნებებს მის დამატებით ობიექტზე, მაგრამ აწკაპუნებს ობიექტის ზღვარზე, რათა გადავიდეს მამის ობიექტზე.
$ ("გარე"). დააწკაპუნეთ(function(e)(console.log("გარე"); e.stopPropagation();)); $ ("შიდა"). დააწკაპუნეთ(function(e)(console.log("inner"); e.stopPropagation();)); .გარე (შეფუთვა: 10 პიქსელი; ფონი: წითელი;) .შიდა (ზღვარი: 10 პიქსელი; შიგთავსი: 10 პიქსელი; ფონი: ლურჯი; საზღვარი: მყარი თეთრი 1 პიქსელი;)
ველები ასუფთავებენ ელემენტის გარშემო არსებულ ადგილს (საზღვრის პოზიციას), ხოლო დანამატი ასუფთავებს ადგილს ელემენტის გვერდით (საზღვრის შუაში).
ეს ნიშნავს, რომ თქვენმა ელემენტმა არ იცის მისი გარე კორდონების შესახებ, ასე რომ, თუ თქვენ ავრცელებთ კონტროლის დინამიურ ვებ ელემენტებს, გირჩევთ შეცვალოთ რეგისტრაციისა და ზღვრის შეძლებისდაგვარად.
გთხოვთ გაითვალისწინოთ, რომ ბევრჯერ გჭირდებათ ზღვრის შეცვლა.
CSS-ში არსებობს ორი გზა თქვენი ელემენტების გარშემო სივრცის შესაქმნელად: მინდვრები და ბალიშები. უმეტეს სცენარში, სუნი ფუნქციურად იდენტურია, მაგრამ, სინამდვილეში, ისინი, როგორც ჩანს, ცოტა განსხვავებულად იქცევიან. არსებობს მნიშვნელოვანი მოსაზრებები ველებსა და შეყვანას შორის, რომლებიც უნდა გაითვალისწინოთ, როდესაც არჩევთ, თუ რა უნდა გამოიყენოთ ელემენტების გვერდზე გადასატანად. დაიცავით, ამ სიტუაციებში, თუ რომელიმე სფეროს ან მიდგომის გამოყენება შესაძლებელია ერთი და იგივე ეფექტისთვის, გადაწყვეტილება ხშირად მცირდება სპეციალურ პირობებზე.
კოლის ვიკორისტუვატის ველები
გსურთ თქვენი ინტერვალი გამოჩნდეს საზღვრის ხელისუფლების მიერ შექმნილი ველის საზღვრებს გარეთ? მინდვრები კორდონების საზღვრებს მიღმა დევს, ასე რომ, თუ გინდათ, რომ თქვენი საზღვარი ერთ ადგილას დაიკარგოს, მათ ვიკორატორობ. ეს შეიძლება იყოს ცოტა ტკივილი, როგორც თქვენ გაქვთ, მაგალითად, სხივის პანელიჩარჩოთი, სადაც გსურთ გასვლა ძირითადი ზონიდან.
თქვენ არ გსურთ ფონის ფერი ან სურათები შემოიჭრას თქვენს განსაკუთრებულ სივრცეში. ფონის ფერებისურათები კი მოთავსებულია საზღვრებზე, ასე რომ თქვენ შეგიძლიათ შეინახოთ თქვენი ფონი სივრცეში, მუშაობისას, ველები - ძალაუფლებით, როგორც გსურთ.
თქვენ გინდათ დაუთმოთ სივრცე მხეცს და თქვენი ელემენტის ქვემოთ. ზედა და ქვედა ველები ქვედა ველებისგან განსხვავებულად არის აგებული, რადგან ორი ველი ერთზე დალაგებულია, ისინი გაფართოებულია ველების უდიდესი ნაკრების ზომამდე. მაგალითად, თუ ჩავსვამ აბზაცს ზედა ზღვარით 20 პიქსელი და ქვედა ზღვარი 15 პიქსელით, მე მექნება მხოლოდ 20 პიქსელი სივრცე აბზაცებს შორის (ორი ზღვარი გასწორდება ერთზე, და ყველაზე დიდი იმარჯვებს) .
კოლი ვიკორისტოვატი შუასადებები
ეს სიმძლავრე შეიძლება განსხვავდებოდეს ერთიდან რამდენიმე მნიშვნელობამდე.
სურათზე ღია ნაცრისფერი ფერი მიუთითებს იმ ზონაზე, რომლისთვისაც მითითებულია დამტენის ავტორიტეტი:
- მოთხოვნით რას ნიშნავს(5px 10px 15px 20px) - შიდა შესასვლელების მოწყობის თანმიმდევრობა შეურაცხმყოფელი იქნება: ზედა(5px) - უფლება(10px) - ქვედა(15px) - მარცხენა(20 პიქსელი). შიდა შესასვლელების ერთ ხმაში მოწყობის თანმიმდევრობის დასამახსოვრებლად შეგიძლიათ გამოიყენოთ ინგლისური სიტყვა TR ou ბ.ლ.ე (დე თ- ზედა, რ- მართალია, ბ- ქვედა, ლ- მარცხნივ).
- მოთხოვნით სამჯერადი მნიშვნელობა(5px 10px 15px) - შიდა შესასვლელების მოწყობის წესი შეურაცხმყოფელი იქნება: ზედა(5px) - მარჯვენა და მარცხენა(10px) - ქვედა(15px).
- მოთხოვნით ორი ღირებულება(5px 10px) - პირველი მნიშვნელობა (5px) დაადგენს შიდა ღიობის ზომას ზედა და ქვედა ნაწილში ელემენტის ნაცვლად, მეორე (10px) მნიშვნელობა დააყენებს შიდა გახსნას ზედა და მარჯვნივ ელემენტის ნაცვლად.
- მოთხოვნით ერთი ღირებულება(5px) - შიდა შესასვლელი ყველა მხრიდან იქნება იგივე ზომა - 5px.
ბრაუზერის მხარდაჭერა
| ძალა | ოპერა | IExplorer | ზღვარი |
|||
|---|---|---|---|---|---|---|
| padding | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
CSS სინტაქსი:
padding: "სიგრძე | საწყისი | მემკვიდრეობა";JavaScript სინტაქსი:
Object.style.padding = "5px"