Nisbi doldurma dəyəri. CSS kənarlarını və doldurmanı necə təyin etmək olar (və sərin tərtibat məsləhətləri). Yadda saxlanacaq şeylər

Müəllifdən: CSS-i ilk öyrənməyə başlayanda hər zaman kənarlar və doldurma mövzusunda çaş-baş qaldım. Çox oxşar görünürdülər və bəzi hallarda eyni nəticəni verdilər. Bu dərslikdə siz CSS kənarları və paddinglər arasındakı fərqi və bu xassələrin səhifədəki elementlər arasındakı boşluğa necə təsir etdiyini görəcəksiniz. Cavab verən saytlar qurarkən müxtəlif ölçü vahidlərindən istifadə edərək, dağılan kənarları da müzakirə edəcəyik. Məqaləni kənardan və doldurmadan istifadə edərək bir neçə tərtibat məsləhəti ilə yekunlaşdıracağıq.

blok modeli

CSS-də elementlər düzbucaqlı qutular şəklində təmsil olunur. Düzbucaqlı blokun ölçüsü elementin xüsusiyyətləri ilə müəyyən edilir: məzmun, doldurma, çərçivə, kənar.

Elementin məzmun sahəsi ortada yerləşir. Əlavə doldurma məzmun sahəsini əhatə edir. Sərhəd paddingi əhatə edir və margin xarici təbəqədir, yəni. elementdən kənardadır. Təhlükənin nə olduğunu daha yaxşı başa düşmək üçün aşağıda bir diaqram göstərilmişdir.

Diaqramdan göründüyü kimi, padding elementi məzmun sahəsinin xarici kənarından çərçivənin daxili kənarına qədər genişləndirən bir təbəqədir. Bu xüsusiyyət elementin sərhədi ilə onun məzmunu arasındakı məsafəni idarə edir. Doldurma səhifədəki elementin ölçüsünə təsir edir, lakin səhifədəki elementlər arasındakı məsafəyə təsir etmir.

Elementlər arasındakı məsafəni artırmaq və ya azaltmaq lazımdırsa, kənardan istifadə edin. Margin xüsusiyyəti heç bir şəkildə elementin ölçüsünə təsir göstərmir.

Veb səhifədəki bütün blokların ölçülərinin istifadə olunan qutu modelindən asılı olduğunu xatırlamaq vacibdir. İki qutu modeli var: W3C qutu modeli, ənənəvi qutu modeli.

W3C qutu modelinə görə, elementin eni doldurma və kənardan asılı olmayaraq qutunun məzmunundan hesablanır. Üstə padding və haşiyə əlavə olunur verilmiş ölçülər, bu, səhifə tərtibatı üçün gözlənilməz nəticələrə səbəb ola bilər.

Məsələn, eni 200px və hündürlüyü 200px olan bloku götürək, hər tərəfdən 10px dolgu, hər tərəfdən haşiyəsi 2px. Brauzer 200px blokunu görmür. Brauzer bloku göstərmək üçün lazım olan üfüqi məkanı hesablayır və o, 224px təşkil edir: 200(en)+2(sol sərhəd)+10(sol padding)+10(sağ padding)+2(sağ haşiyə)=224px. Kvadrat olduğundan hündürlüyü də 224px olacaq.

Digər tərəfdən, ənənəvi qutu modeli en kimi məzmunun, dolğunluğun və haşiyənin cəmini götürür. Bu o deməkdir ki, blokunuzun eni 200 pikseldirsə, brauzer onu göstərmək üçün lazım olan üfüqi məkanı hesablayacaq və padding və haşiyə daxil olmaqla 200 piksel olacaq. Nəticə daha proqnozlaşdırıla bilər və onunla işləmək daha asandır.

Varsayılan olaraq, bütün brauzerlər W3C qutu modelindən istifadə edirlər. Model qutu ölçüsü xüsusiyyətindən istifadə edərək əl ilə təyin edilə bilər. Qəbul edilən iki dəyər məzmun qutusu (W3C) və sərhəd qutusu (ənənəvi). Ənənəvi model daha intuitivdir ki, bu da onu veb tərtibatçıları arasında ən populyar hala gətirib.

Aşağıdakılar qutu ölçüsündən istifadə edərək layihənizdə ənənəvi modeldən necə istifadə edəcəyinizi göstərir:

html ( qutu ölçüsü: sərhəd qutusu; ) *, *: əvvəl, *: sonra ( qutu ölçüsü: miras; )

html (

qutu ölçüsü: haşiyə - qutu;

* , * : əvvəl sonra (

qutu ölçüsü: miras almaq;

Özünüz bir şey etdiyiniz zaman daha sürətli xatırlayırsınızsa, Guy Routledge-dən əyləncəli interaktiv demo ilə sınaqdan keçirin.

Kənarların və dolğunluğun qurulması

padding-top , padding-right , padding-bottom və padding-left xassələri elementin dörd tərəfindəki dolğunluğu idarə edir. Siz həmçinin stenoqrafiya xüsusiyyəti vasitəsilə padding təyin edə bilərsiniz. Tək doldurma dəyəri yazılsa, CSS ondan bütün 4 tərəf üçün doldurmanı təyin etmək üçün istifadə edir:

/* bütün 4 tərəf */ padding: 10px;

3 dəyər varsa, birincisi yuxarı üçün, ikincisi sol və sağ üçün, üçüncüsü isə aşağıdır:

/* yuxarı | üfüqi | alt */ padding: 1em 20px 2em;

Bütün 4 dəyər varsa, hər biri müvafiq olaraq yuxarı, sağ, aşağı və soldan məsuldur:

/* yuxarı | sağ | alt | sol */ padding: 10px 10% 2em 15%;

Aşağıdakı demoda narıncı fon müxtəlif elementlər üçün məzmun sahəsi, haşiyə ilə məzmun arasındakı ağ sahə doldurmadır:

Doldurma padding kimi hər 4 tərəfdən kənar-yuxarı, kənar-sağ, kənar-alt və kənar-sol xüsusiyyətləri ilə idarə oluna bilər. Həmçinin, stenoqrafiya xassəsindən istifadə edərək bir anda bütün 4 tərəf üçün marja təyin edilə bilər.

/* bütün 4 tərəf */ kənar: 10px; /* şaquli | üfüqi */ kənar: 2em 4em; /* yuxarı | üfüqi | alt */ kənar: 2em avtomatik 2em; /* yuxarı | sağ | alt | sol */ kənar: 10px 10% 2em 15%;

Yadda saxlanacaq şeylər

Düzgün ölçü vahidlərindən istifadə edin

Doldurma və kənar ilə işləyərkən mütləq vahidlərdən çəkinin. Bu cür vahidlər şrift ölçülərində və ekran genişliyindəki dəyişikliklərə uyğunlaşmır.

Tutaq ki, siz elementin enini 50% və 15px kənarını təyin etdiniz. 1200px enində elementin eni 600px, kənarı isə 15px olacaq. 769px enində elementin eni 384px, kənarı isə 15px olacaq.

Elementin eni 36% dəyişib, kənarı isə dəyişməyib. Əksər hallarda bu ən böyük problem deyil. Bununla belə, elementin kənarını faiz olaraq təyin etsəniz, bütün ekranlarda səhifənin tərtibatına daha yaxşı nəzarət edəcəksiniz. Tətbiq edilmiş margin və doldurma dəyərlərində qəfil sıçrayışlar olmadan hər şey mütənasib görünəcəkdir.

Eynilə, siz səhifədəki mətn elementlərinə doldurma əlavə etmək istəyə bilərsiniz. Əksər hallarda, doldurmanın elementdəki şrift ölçüsünə mütənasib olmasını istəyirsiniz. Mütləq vahidlərdə bunu etmək mümkün deyil. Bununla belə, siz paddingi em-ə təyin etsəniz, o, avtomatik olaraq şrift ölçüsünə uyğunlaşacaq. Aşağıdakı demo hərəkəti böyütməyi göstərir.

Brauzerlər müxtəlif vahidlər üçün kənarı və dolğunluğu necə hesablayır

Brauzerlər ölçü vahidlərindən asılı olaraq kənarın və dolğunluğun son dəyərlərini fərqli hesablayırlar.

Faizlə verilən marja və doldurma qabın eninə nisbətən hesablanır. Beləliklə, qabın eni 100px olarsa 5% doldurulması 5px və ya konteynerin eni 1000px olarsa 50px olacaqdır. Unutmayın ki, yuxarı və aşağı qiymətlər də konteynerin eni ilə hesablanır.

Ems vəziyyətində, kənar və dolğunluğun dəyəri elementin şrift ölçüsünə əsaslanır. Əvvəlki demoda, alt üç mətn elementindəki doldurma 1em-dir. Fərqli şrift ölçülərinə görə hesablanmış doldurma dəyəri həmişə fərqli olacaq.

Həmçinin 4 baxış bölməsi vw, vh, vmin və vmax var. Bu halda, kənar və doldurma dəyərləri görünüş pəncərəsindən asılı olacaq. Məsələn, 5vw doldurulması 500px görünüş pəncərəsində 25px, 10vw doldurulması isə eyni görünüş pəncərəsində 50px olacaqdır. Bu ölçü vahidləri haqqında daha çox öyrənə bilərsiniz SitePoint məqaləsində "CSS Viewport Units of Measure: Quick Start".

Əgər siz yenisinizsə, bu bölmələrin necə işlədiyini bilmək sizə HTML elementlərində dolğunluq və kənarların niyə valideynin, şriftin və hətta baxış pəncərəsinin ölçüsündən asılı olaraq dəyişdiyini tez başa düşməyə kömək edəcək. Və bu, planınıza nəzarət etmək imkanı verəcəkdir.

Yığılan kənarlar

Siz həmçinin dağılan kənarlar anlayışından xəbərdar olmalısınız. Müəyyən hallarda iki elementin yuxarı və aşağı kənarları birinə yığıla bilər. Bu fenomenə marjanın çökməsi deyilir.

Tutaq ki, sizdə biri digərinin altında olan iki element var, yəni. eyni səviyyədə. Əgər birinci elementdə margin-bottom ölçüsünü 40px, ikinci elementdə isə 25px olaraq təyin etsəniz, elementlər arasındakı ümumi kənar 65px-ə bərabər olmayacaq. Abzas daha böyük marjanın dəyərinə bərabər olacaq, yəni. 40px.

Eynilə, kənarlar valideyn və ilk və ya sonuncu uşaq arasında daralır. Bu, uşaq və valideyn kənarlarını ayıran haşiyə, doldurma və ya daxili məzmun olmadıqda baş verir. Bu halda, valideyndə heç bir padding və ya haşiyə yoxdursa, uşaq elementin kənarı valideyndən "axacaq".

Bu davranışı düzəldə bilərsiniz. Bunu etmək üçün, əsas marja ilə uşaq marjası arasında bir maneə əlavə etməlisiniz. Aşağıdakı demo ana elementə haşiyə və ya dolğunluğun əlavə edilməsinin problemi necə həll etdiyini göstərir.

Mənfi marjalar vəziyyətində, çökdürülmüş marjanın yekun dəyəri müsbət marja və ən kiçik mənfi marjanın cəmidir. Siz Adam Roberts tərəfindən Margin Collapsing kitabında kənarların yığılması haqqında daha çox öyrənə bilərsiniz.

Margin və padding istifadə etmək üçün maraqlı yollar

Bəzən haşiyələrdən və paddingdən istifadə layout problemlərini həll edə bilər. Bir neçə nümunə aşağıda təsvir edilmişdir:

Şəkillərdə aspekt nisbətini qoruyun

Çox vaxt səhifədəki şəkillər fərqli aspekt nisbətlərinə malikdir. Bütün şəkilləri eyni aspekt nisbətində göstərmək lazımdırsa, CSS padding sizə kömək edəcək.

Bunun üçün siz valideynin hündürlüyünü sıfıra təyin etməlisiniz və valideynin padding-top xassəsi faizlə ifadə olunan aspekt nisbətinin dəyərinə bərabər olmalıdır.

Məsələn, 16:9 aspekt nisbəti doldurmaqla əldə edilir: 56,25% 0 0 0. 56,25 dəyəri (9/16)*100 ilə əldə edilir. Bu üsulla siz istənilən digər aspekt nisbəti üçün doldurma faizlərini hesablaya bilərsiniz.

Nəticə

Əgər siz CSS-də yenisinizsə, ümid edirəm ki, bu dərslik margin və padding arasındakı fərqi anlamağa kömək etdi. Siz abbreviaturalar və uyğun vahidlər baxımından kənar və dolğunluğu necə təyin etməyi öyrənməlisiniz. Son hissədə ikisini göstərdim maraqlı yollar planlara xassələrin tətbiqi və əlavə öyrənmək üçün sizə resurslara keçidlər verir. Əgər başqa CSS kənarları və doldurma məsləhətləriniz varsa, lütfən şərhlərdə onları yerləşdirin.

Təsvir

Elementin məzmunu ətrafındakı kənarların dəyərini təyin edir. Haşiyə elementin çərçivəsinin daxili kənarından onun məzmununu məhdudlaşdıran xəyali düzbucaqlıya qədər olan məsafədir (Şəkil 1).

Doldurma xassəsi elementin bütün tərəfləri üçün doldurma dəyərini bir anda təyin etməyə və ya onu yalnız göstərilən tərəflər üçün təyin etməyə imkan verir.

Sintaksis

doldurma: [dəyər | faiz] (1, 4) | miras almaq

Dəyərlər

Bir, iki, üç və ya dörd dəyərdən istifadə etməyə, onları boşluqla ayırmağa icazə verilir. Təsir dəyərlərin sayından asılıdır və Cədvəldə verilmişdir. 1.

Sərhədlər piksel (px), faizlər (%) və ya digər CSS-ə uyğun vahidlərlə müəyyən edilə bilər. Vərəsəlik dəyəri onun valideyndən miras alındığını göstərir. Faiz kimi marja göstərildikdə, dəyər elementin əsas hissəsinin enindən hesablanır.

HTML5 CSS2.1 IE Cr Op Sa Fx

padding

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Minimum məşq etmək üçün heç bir nəticə əldə edə bilməzsiniz.

Nəticə bu misalŞəkildə göstərilmişdir. 2.

düyü. 2. Doldurma xassəsinin tətbiqi

Obyekt Modeli

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

Brauzerlər

7.0 versiyasına qədər olan Internet Explorer miras dəyərini dəstəkləmir.

Əvvəlki fəsildə biz bunu qeyd etdik CSS xüsusiyyətləri, kənar (sahə) və doldurma (gizinti) kimi. İndi biz onların üzərində daha ətraflı dayanacağıq və onların bir-birindən necə fərqləndiyini və hansı xüsusiyyətlərə malik olduğunu nəzərdən keçirəcəyik.

Siz hər iki yolla elementlər arasında boşluqlar yarada bilərsiniz, lakin padding məzmundan blokun kənarına qədər olan abzasdırsa, marja bir blokdan digərinə olan məsafədir, bloklararası boşluqdur. Ekran görüntüsü yaxşı bir nümunə göstərir:

Doldurma məzmunu blok sərhədindən ayırır, kənar isə bloklar arasında boşluqlar yaradır

Gördüyünüz kimi, CSS kənarları və doldurulması fərqlidir, baxmayaraq ki, bəzən koda baxmadan məsafəni təyin etmək üçün hansı xassədən istifadə olunduğunu müəyyən etmək mümkün olmur. Bu, məzmun bloku üçün çərçivə və ya fon olmadıqda baş verir.

Elementin hər tərəfdən CSS-də kənar və ya doldurma təyin etmək üçün aşağıdakı xüsusiyyətlər mövcuddur:

Girişlər:

üst doldurma: məna;
padding-sağ: məna;
padding-alt: məna;
padding-sol: məna;

Sahələr:

yuxarı kənar: məna;
sağ kənar: məna;
kənar-alt: məna;
kənar-sol: məna;

Dəyərlər istənilən CSS vahidində göstərilə bilər - px, em, % və s. Misal: margin-top: 15px .

kimi çox lazımlı bir şey də var Margin və padding üçün CSS stenoqramı. Elementin dörd tərəfi üçün kənarları və ya dolğunluğu təyin etmək lazımdırsa, hər tərəf üçün ayrıca xüsusiyyət yazmaq lazım deyil. Hər şey daha sadələşdirilmişdir: kənar və doldurma üçün bir anda 1, 2, 3 və ya 4 dəyər təyin edə bilərsiniz. Parametrlərin necə paylanması dəyərlərin sayından asılıdır:

4 dəyər: doldurma elementin bütün tərəfləri üçün aşağıdakı ardıcıllıqla təyin edilir: yuxarı, sağ, aşağı, sol: doldurma: 2px 4px 5px 10px;
3 dəyər: padding əvvəlcə yuxarı tərəf üçün, sonra həm sol, həm də sağ üçün, sonra isə aşağı üçün təyin edilir: padding: 3px 6px 9px;
2 dəyər: padding əvvəlcə yuxarı və aşağı tərəfdən eyni vaxtda, sonra isə - sol və sağ tərəflər üçün eyni vaxtda təyin edilir: padding: 6px 12px;
1 dəyər: elementin bütün tərəfləri üçün eyni padding təyin edin: padding: 3px;

Eyni qaydalar CSS margin xüsusiyyətinə də aiddir. Qeyd edək ki, marja üçün mənfi dəyərlərdən də istifadə edə bilərsiniz (məsələn, -3px), bu bəzən olduqca faydalı ola bilər.

çökmə marjası

Vəziyyəti təsəvvür edin: iki blok elementi bir-birinin üstündədir və onlara kənarlar verilir. üçün yuxarı blok kənara təyin edin: 60px və aşağı olanı kənara: 30px . İki elementin iki sərhəd kənarının sadəcə bir-birinə toxunacağını və nəticədə bloklar arasındakı boşluğun 90 piksel olacağını güman etmək məntiqli olardı.

Bununla belə, işlər fərqlidir. Əslində, belə bir vəziyyətdə, iki bitişik element sahəsindən ölçüsü ən böyüyü seçildikdə, çökmə adlanan bir təsir özünü göstərir. Bizim nümunəmizdə elementlər arasında yaranan boşluq 60 piksel olacaq.

Bloklar arasındakı məsafə dəyərlərin böyüklüyünə bərabərdir

Yığılmış kənarlar yalnız elementlərin yuxarı və aşağı kənarları üçün işləyir, sağ və sol tərəflərdəki kənarlara tətbiq edilmir. Boşluğun son dəyəri müxtəlif hallarda müxtəlif yollarla hesablanır:

Hər iki marja dəyəri müsbət olduqda, son kənar ölçüsü daha böyük dəyər olacaqdır.
Dəyərlərdən biri mənfi olarsa, sahə ölçüsünü hesablamaq üçün dəyərlərin cəmi alınmalıdır. Məsələn, 20px və -18px dəyərlərində sahə ölçüsü belə olacaq:
20 + (-18) = 20 - 18 = 2 piksel.
Hər iki dəyər mənfi olarsa, bu ədədlərin modulu müqayisə edilir və modulu daha böyük olan nömrə seçilir (buna görə də mənfi ədədlərin kiçik olanı). Misal: -6px və -8px sahələrinin dəyərlərini müqayisə etmək istəyirsiniz. Müqayisə olunan ədədlərin modulları müvafiq olaraq 6 və 8-dir. Belə çıxır ki, 6 -8. Son sahə ölçüsü -8 pikseldir.
Dəyərlər müxtəlif CSS vahidlərində göstərildiyi halda, onlar birinə endirilir, sonra müqayisə edilir və daha böyük dəyər seçilir.
Uşaq elementləri üçün kənarın ölçüsü daha maraqlıdır: əgər uşağın valideyndən daha böyük marjası varsa, ona üstünlük verilir. Bu halda, valideynin yuxarı və aşağı kənarlarının ölçüləri uşaq üçün təyin olunanlarla eyni olacaq. Bu halda valideynlə uşaq arasında heç bir məsafə qalmayacaq.

Təsvir

Doldurma xassəsi elementin bütün tərəfləri üçün doldurma dəyərini bir anda təyin etməyə və ya onu yalnız göstərilən tərəflər üçün təyin etməyə imkan verir.

Sintaksis

doldurma: [dəyər | faiz] (1, 4) | miras almaq

Dəyərlər

Bir, iki, üç və ya dörd dəyərdən istifadə etməyə, onları boşluqla ayırmağa icazə verilir. Təsir dəyərlərin sayından asılıdır və Cədvəldə verilmişdir. 1.

HTML5 CSS2.1 IE Cr Op Sa Fx

padding

Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 2.

düyü. 2. Doldurma xassəsinin tətbiqi

Obyekt Modeli

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

Brauzerlər

7.0 versiyasına qədər olan Internet Explorer miras dəyərini dəstəkləmir.

İndi sizə deyim, bu çox vacib bir dərsdir. Onu öyrəndikdən sonra siz səhifədə elementləri tənzimləyə, aralarında abzaslar qoya, onları ayrıca xüsusi blok daxilində yarada, kənarları təyin edə biləcəksiniz.

padding

Doldurma elementin haşiyənin daxili kənarından məzmuna qədər olan doldurma miqdarını təyin edən xüsusiyyətdir. Məzmun düz mətn, şəkil və ya öz kənarları ola bilən uşaq element ola bilər.

Vahidlər piksel (px) və ya faiz (%) ola bilər.

#blok(
doldurma: 12px /* blok sərhədlərindən məzmuna qədər doldurma - hər tərəfdən 12 piksel olacaq */
}

Sahəni yalnız bir xüsusi tərəfdə təyin etmək mümkündür:

yastıq üstü- yuxarıda kənarlar yaradan xüsusiyyət.
sağ doldurma- sağda sahələr yaradan əmlak.
dolgu-alt- alt kənarları yaradan əmlak.
dolgu-sol- solda kənarları yaradan xüsusiyyət.

#blok(
alt doldurma: 25px /* alt kənar 25px */
padding-sol: 15px; /* sol kənar 15px */
}

Diqqət etdiyiniz kimi, bu şəkildə 2 və ya 3 tərəfdən sahələri göstərsəniz, uzun bir kod alacaqsınız. Bunun üçün padding xassəsinin stenoqrafiya qeydi var. Bütün 4 dəyər növbə ilə göstərilir - hər bir kənardan bir sətirdə hərəkət yuxarıdan başlayaraq saat yönünde gedir:

Doldurma: Üst Doldurma Sağ Doldurma Aşağı Doldurma Sol;

#blok(
doldurma: 25px 10px 15px 6px; /* yuxarı 25px, sağ 10px, aşağı 15px, sol 6px */
}

marja

Margin xassəsi, paddingdən fərqli olaraq, elementlərin sərhədləri arasında doldurma miqdarını təyin edir.
Element uşaqdırsa, doldurma elementin haşiyəsindən valideyn sərhədinin daxili kənarına qədər olan boşluqdur.
Elementin valideyni yoxdursa, o zaman girinti ətraf elementlərin sərhədinin kənarlarına xassə tərəfindən təyin olunan boş yer hesab olunur.

#blok(
kənar: 4px
}

Yalnız müəyyən tərəflərdə abzasları təyin etmək üçün aşağıdakı xüsusiyyətlər mövcuddur:

kənar-üst- yuxarıdan girintilər yaradan xüsusiyyət.
kənar-sağ- sağda girintilər yaradan xüsusiyyət.
kənar-alt- aşağıdan girintilər yaradan xüsusiyyət.
kənar-sol- solda girintilər yaradan xüsusiyyət.

Doldurma xüsusiyyəti kimi, margin də müxtəlif tərəflər üçün stenoqram dəyərləri vermək qabiliyyətinə malikdir. Hərəkət yuxarı kənardan saat əqrəbi istiqamətində gedir:

Haşiyə: Yuxarı Haşiyə Sağ Haşiyə Marjası Aşağı Haşiyə Sol;

#blok(
haşiyə: 15px 10px 5px 25px; /* yuxarı 15px, sağ 10px, aşağı 5px, sol 25px */
}

Diqqətinizə görə təşəkkürlər!