CSS padding CSS qutusu modelinin xüsusiyyətlərindən biridir. Bu stenar əmlak HTML elementinin bütün dörd tərəfinin ətrafında padding edir. CSS padding təxminən hər HTML etiketinə tətbiq edilə bilər (bəzi masa etiketləri istisna olmaqla). Bundan əlavə, elementin bütün dörd tərəfi fərqli bir dəyərə malik ola bilər.
CSS Padding Əmlak
Stenoqrafiya və CSS padding mülkiyyətindən istifadə etmək üçün, Mnemonic "TRouBLe" (və ya "Star Trek" azarkeşləri üçün "TRiBbLe") istifadə edə bilərsiniz. Bu, yuxarı , sağ , alt və soldan ibarətdir və bu, stenoqrafiya və əmlaka qoyduğunuz padding genişliklərinin qaydasına istinad edir. Misal üçün:
padding: yuxarı sağ aşağı sol; padding: 1px 2px 3px 6px;Əgər yuxarıda göstərilən dəyərləri istifadə etsəniz, tətbiq etdiyiniz HTML elementinin hər tərəfinə fərqli bir dolgu dəyərini tətbiq edəcəkdir. Bütün dörd tərəflərə eyni padding tətbiq etmək istəyirsinizsə, CSS-i sadələşdirə və yalnız bir dəyər yaza bilərsiniz:
padding: 12px;CSS xətti ilə 12 piksel padding elementin bütün 4 tərəfinə tətbiq oluna bilər.
Üst və alt və sol və sağ üçün padding eyni olmasını istəyirsinizsə, iki dəyər yaza bilərsiniz:
padding: 24px 48px;İlk dəyər (24px) yuxarı və aşağıya, ikincisi isə sola və sağa tətbiq ediləcək.
Üst və alt dəyişdirərkən üç dəyər yazarsanız, bu üfüqi padding (sol və sağ) eyni edəcək:
padding: yuxarı sağ və sol alt; padding: 0px 1px 3px;CSS qutusu modelinə görə, padding elementə / tərkibə ən yaxındır. Yəni, padding məzmun genişliyi və ya boyu və istifadə etdiyiniz sərhəd dəyərləri arasında bir elementə əlavə olunur. Padding sıfıra qoyulduqda, məzmunu eyni kənarına malikdir.
CSS padding dəyərləri
CSS padding hər hansı qeyri-mənfi uzunluğu dəyərini ala bilər. Px və ya em kimi ölçüləri göstərməyinizə əmin olun. Ayrıca, elementin tərkib blokunun genişliyinə görə faiz olan padding üçün faiz müəyyən edə bilərsiniz. Üst və alt padding üçün bu daxildir. Misal üçün:
# konteyner {genişlik: 800px; boyu: 200px; } #container p {genişlik: 400px; boy: 75%; padding: 25% 0; }# Container elementinin içindəki paraqrafın hündürlüyü # containerın hündürlüsünün 75% -ni, üst padding üçün genişliyin 25% -ni və alt padding üçün genişliyin 25% -ni təşkil edəcək. Bu, 300 + 200 + 200 = 700px təşkil edir.
CSS padding əlavə etmenin təsiri
Blok səviyyəli elementlərdə padding dörd tərəfə tətbiq olunur. Element zaten bir blok və ya qutu olduğundan, dolgu qutu tərəflərinə tətbiq edilir.
CSS padding inline elementlərə əlavə olunduqda, şaquli padding xəttinin hündürlüyünü aşsa, xəttin hündürlüyü aşağıya keçməyəcəksə, inline elementin yuxarı və aşağı hissələrində bəzi üst-üstə düşən elementlər ola bilər. Inline elementlərə tətbiq edilən yatay CSS padding elementin başlanğıcına və elementin sonuna əlavə olunacaq. Və padding xətləri kəsdirə bilər. Ancaq çox satırlı bir elementin bütün xəttlərinə tətbiq olunmayacaq, beləliklə, çox satırlı inline məzmunun bir seqmentini girmək üçün padding istifadə edə bilməzsiniz.
Bundan əlavə, CSS2.1-də, genişlik eni (və ya padding widths) üçün faiz olan elementə bağlı olduğu konteyner blokları yarada bilməzsiniz. Əgər nəticə verməsə, müəyyən edilməmişdir. Brauzerlər hələ də məzmunu görüntüləyəcəklər, lakin siz gözlədiyiniz nəticələr əldə edə bilməzsiniz. Əgər bu barədə düşünsəniz, konteyner elementi onun genişliyini müəyyən etmək üçün uşağın elementlərinin genişliyini bilməli olduğu kimi - məsələn, öncədən müəyyən edilmiş genişliyi olmayan bir və ya daha çox konteyner elementinin bir hissəsi kimi müəyyən edilən bir genişlik, heç bir cavabsız dairəvi zəncir qurur. Sənədinizdə hər hansı bir şeyin genişlikləri üçün faizlər istifadə edirsinizsə, əsas element genişliklərinin də müəyyənləşdirildiyinə əmin olmalısınız.