Მოკლე მიმოხილვა CSS Padding

CSS padding არის ერთერთი თვისებები CSS ყუთი მოდელი . ეს სტენოკარდიუმი ადგენს padding გარშემო ოთხივე მხარეს HTML ელემენტს. CSS padding შეიძლება გამოყენებულ თითქმის ყველა HTML tag (გარდა ზოგიერთი მაგიდის tags). გარდა ამისა, ელემენტის ოთხივე მხარეს შეიძლება ჰქონდეს განსხვავებული მნიშვნელობა.

CSS Padding ქონება

იმისათვის, რომ გამოიყენოთ მოკლე CSS CSS padding property, თქვენ შეგიძლიათ გამოიყენოთ mnemonic "TROUBLe" (ან "TRiBbLe" თქვენ Star Trek თაყვანისმცემლებს). ეს დგას ზედა , მარჯვენა , ქვედა და მარცხნივ , და ეს ეხება ბრძანებით padding widths თქვენ მითითებული shorthand ქონება. მაგალითად:

padding: ზედა მარჯვენა ქვედა მარცხენა; padding: 1px 2px 3px 6px;

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

padding: 12px;

ამ ხაზის CSS, 12 პიქსელი padding გამოიყენებს ყველა 4 მხარეს ელემენტს.

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

padding: 24px 48px;

პირველი მნიშვნელობა (24px) ვრცელდება ზედა და ქვედა ნაწილზე, მეორე კი მიმართავს მარცხნივ და მარჯვნივ.

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

padding: ზედა მარჯვენა და მარცხენა ქვედა; padding: 0px 1px 3px;

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

CSS Padding ღირებულებები

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

#container {width: 800px; სიმაღლე: 200px; } #container p {width: 400px; სიმაღლე: 75%; padding: 25% 0; }

#container ელემენტის შიგნით პარაგრაფის სიმაღლე იქნება კონტეინერის სიმაღლის 75% და სიგანე 25% სიღრმის ზედა პედიკურის სიგანე 25% და სიგანე 25%. ეს შეადგენს 300 + 200 + 200 = 700px.

CSS Padding დამატების ეფექტები

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

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

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