ev > Microsoft > li css padding. HTML elementindən girintiləri necə çıxarmaq olar. HTML səhifəsinin kənarlarından kənarları necə çıxarmaq olar


li css padding. HTML elementindən girintiləri necə çıxarmaq olar. HTML səhifəsinin kənarlarından kənarları necə çıxarmaq olar




Bu yazıda sizə necə düzgün yerləşdirməyi demək istərdim sahələr(doldurma) və girinti(margin) CSS-də.

Əvvəlcə W3C spesifikasiyasına uyğun olaraq kənarların və dolğunluğun tərifini xatırlayaq. Qutu modelində kənarlar qutunun məzmunu ilə sərhədi arasındakı məsafədir. Doldurma blokun sərhədi ilə bitişik və ya əsas elementin sərhədi arasındakı məsafədir.

Beləliklə, elementin haşiyəsi və fonu göstərilməyibsə, onda heç bir fərq yoxdur, abzasları təyin etmək üçün doldurma və ya margin xassəsindən istifadə edin, lakin elementin eni (en) və hündürlüyü (hündürlüyü) göstərilməmək şərti ilə. və qutu ölçüsü xüsusiyyətlərindən istifadə edərək məzmun ölçülərinin hesablanması alqoritmi.

Hər halda, unutmayın ki, kənarlar elementin eninə və ya hündürlüyünə daxil edilə bilər və ya daxil edilə bilməz. Abzaslar həmişə elementdən kənarda qoyulur.

İndi elementlər arasında kənarları və boşluğu necə düzgün yerləşdirməyə baxaq. Nümunə olaraq aşağıdakı bloku götürək.

Bu xəbər blokudur. O, başlıqdan, xəbərlər siyahısından və “Digər xəbərlər” keçidindən ibarətdir. Gəlin onlara aşağıdakı sinif adlarını verək: news__title, news__list və news__more-link.

Xəbərlər

Digər xəbərlər

Bu elementlərin hər biri eyni sol və sağ kənarlara malik olduğundan, hər bir element üçün ayrı-ayrılıqda sol və sağ kənarları təyin etməkdənsə, kənarları ana bloka təyin etmək daha yaxşıdır.

Xəbərlər (doldurma: 20px 25px; )

Beləliklə, sağ və soldakı sahələrin dəyərini dəyişdirmək lazımdırsa, bunu etmək lazımdır Bir yerdə. Və xəbər blokunun içərisinə yeni element əlavə edərkən, artıq solda və sağda lazımi boşluqlar olacaq.

Tez-tez olur ki, blokdakı bütün elementlər sol və sağda eyni dolğunluğa malikdir, biri istisna olmaqla, məsələn, arxa plana görə heç bir doldurma olmamalıdır. Bu halda, element üçün mənfi doldurma təyin edə bilərsiniz. Sonra digər elementlər üçün blokun daxilindəki sahələri silməli olmayacaqsınız.

İndi elementlər arasında şaquli kənarları təyin etməlisiniz. Bunu etmək üçün elementlərdən hansının olduğunu müəyyən etməlisiniz məcburi. Aydındır ki, xəbərlər bloku xəbər siyahısı olmadan mövcud ola bilməz, eyni zamanda “Digər xəbərlər” keçidi olmaya bilər; başlıq, məsələn, dizayn dəyişdirildikdə silinə bilər.

Bunu nəzərə alaraq, başlıq üçün aşağı abzas, yuxarıda isə “Digər xəbərlər” keçidi üçün abzas qoyduq.

Xəbərlər__başlıq (alt kənar: 10px; ) .news__daha çox keçid ( yuxarı kənar: 12px; )

Xəbərlər siyahısı üçün yuxarı və aşağı padding əlavə etməklə eyni xarici nəticəyə nail ola bilərik.

Xəbərlər__siyahısı ( kənar: 10px 0 12px 0; )

İndi ayrı-ayrı xəbərlər arasında girintiləri təyin etməlisiniz. Yenə də nəzərə alın ki, xəbərlərin sayı dəyişə bilər və siyahıda yalnız bir xəbər ola bilər.

Siz birincidən başqa hər bir xəbər üçün yuxarı abzas və ya sonuncudan başqa hər bir xəbər üçün aşağı abzas təyin edə bilərsiniz. Birinci seçimə üstünlük verilir, çünki:ilk uşaq psevdoselektoru CSS 2.1 spesifikasiyasına əlavə edilib və yalnız CSS 3.0 spesifikasiyasına əlavə edilmiş:son uşaq psevdoselektorundan fərqli olaraq daha geniş dəstəyə malikdir.

Xəbər__siyahı elementi ( yuxarı kənar: 18px; ) .news__list-element:birinci uşaq ( yuxarı kənar: 0; )

Beləliklə, kənarların və girintilərin düzgün yerləşdirilməsi üslublara dəyişiklik etmədən və dizaynı pozmadan istənilən blokun görünüşünü çevik şəkildə dəyişməyə imkan verir. Ən əsası hansı blok elementlərinin əsas olduğunu müəyyən etməkdir ( məcburi) və hansılar isteğe bağlıdır.

Bəzən tələb olunan elementlərə etibar edə bilmirik. Məsələn, bizim pop-up pəncərəmiz var, onun daxilində bəzi başlıq və mətn göstərilə bilər. Üstəlik, bəzi hallarda mətn, bəzi hallarda isə başlıq olmaya bilər. Yəni hər iki element isteğe bağlıdır.

Bu halda, abzasları təyin etmək üçün aşağıdakı üsuldan istifadə edə bilərsiniz.

Popup__header + .popup__text ( yuxarı kənar: 15px; )

Sonra girinti yalnız hər iki element istifadə edildikdə görünəcək. Yalnız başlıq və ya yalnız mətn göstərildiyi halda, əlavə abzas olmayacaq.

Şaquli kənarların yığılması

Hər kəsin bilmədiyi başqa bir nüans, bitişik bloklar arasındakı şaquli boşluqlarla bağlıdır. Yuxarıda verdiyim girinti tərifində deyilir ki, girinti aralarındakı məsafədir sərhədlər cari və qonşu bloklar. Beləliklə, iki bloku bir-birinin altına yerləşdirsək və onlardan birinə 30px, digərinə isə 20px yuxarı kənar versək, aralarındakı sərhəd 50px deyil, 30px olacaq.

Yəni girintilər üst-üstə düşəcək və bloklar arasındakı boşluq girintilərin cəminə deyil, ən böyük girintiyə bərabər olacaqdır. Bu təsirə "çökmə" də deyilir.

Nəzərə alın ki, üfüqi girintilər, şaquli olanlardan fərqli olaraq, "yıxılmır", lakin yekunlaşdırılır. Sahələr (doldurma) da yekunlaşdırılır.

Girintilərin "yıxılması" haqqında bilməklə, bu xüsusiyyətdən öz xeyrimizə istifadə edə bilərik. Məsələn, məqalə daxilində başlıqları və mətni abzas etmək lazımdırsa, onda birinci səviyyəli başlıq üçün aşağı abzasın 20px, ikinci səviyyənin başlığı üçün yuxarı abzasın 20px, aşağı isə 10px, bütün abzaslarda üst abzasın 10px olaraq təyin edirik.

H1 ( alt kənar: 24 piksel; ) h2 ( yuxarı kənar: 24 piksel; alt kənar: 12 piksel; ) p ( yuxarı kənar: 12 piksel; )

İndi h2 başlığı h1 başlığından sonra və ya paraqrafdan sonra yerləşdirilə bilər. Hər halda, yuxarı kənar 24px-dən çox olmayacaq.

Ümumi qaydalar

Xülasə etmək istərdim ki, kənarları və abzasları tərtib edərkən əməl etdiyim qaydaları sadalamaq istərdim.

  1. Qonşu elementlər eyni doldurmaya malikdirsə, onları elementlərə deyil, əsas konteynerə təyin etmək daha yaxşıdır.
  2. Elementlər arasında abzaslar təyin edərkən, elementin tələb və ya isteğe bağlı olub olmadığını nəzərə almalısınız.
  3. Bənzər elementlərin siyahısı üçün elementlərin sayının dəyişə biləcəyini unutmayın.
  4. Şaquli paddingdən xəbərdar olun və bu funksiyadan sizə fayda gətirəcək yerdə istifadə edin.

Teqlər: Teqlər əlavə edin

Tapşırıq

Markerlə işarələnmiş və ya nömrələnmiş siyahıların ətrafındakı dolguları silin.

Həll

Nümunə 1-də göstərildiyi kimi, siyahı növündən asılı olaraq UL və ya OL seçicisi üçün null dəyəri olan kənar və doldurma stili xassəsindən istifadə edin.

Nümunə 1: Siyahı abzası

HTML5 CSS 2.1 IE Cr Op Sa Fx

Siyahı abzası

  • Çeburaşka
  • Timsah Gena
  • Şapoklyak

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

düyü. 1. Şaquli və üfüqi abzaslar olmadan siyahı

Diqqət yetirin ki, veb səhifənin sol kənarında görünən siyahı markerləri yox olur. Siyahını sola köçürmədən yalnız yuxarı və aşağı kənarları silmək üçün kənar-yuxarı və kənar-aşağı xassələrindən istifadə edin (nümunə 2).

Nümunə 2: Siyahı abzası

HTML5 CSS 2.1 IE Cr Op Sa Fx

Siyahı abzası

  • Çeburaşka
  • Timsah Gena
  • Şapoklyak

Daxili bloklar (inline-block) bir çox hallarda çox əlverişli işarələmə vasitəsidir. Onların istifadəsinə dair nümunələr məqalələrdə tapıla bilər.

Eyni zamanda, onlarla əlaqəli bir tələ var. Hətta bütöv bir daş daşı deyərdim. Onu görmək istəyirsən? Bir sıra daxili elementləri (və ya daxili blokları) yerləşdirin.

Tutaq ki, bizdə bu HTML var:

  • Storki.
  • Sadəcə
  • xətlər

Elementləri kiçik hərf etmək:

Li(ekran:daxili; )

...və ya xətt blokları:

Li( display:inline-block; /* IE6-7 üçün növbəti iki sətir - daxili blokun davranışını təqlid edir */ //display:inline; zoom:1; )

Problem

Əksər brauzerlər daxili blokları (elementləri) girinti ilə ayırır. Qavrama asanlığı üçün blokları bir az rənglədim.

Vay! Nə cür girintilər? Mən belə bir şey təyin etməmişəm!

Gəlin razılaşaq ki, bundan sonra mən sadəcə olaraq “daxili blok” yazacağam və “daxili blok ( :inline-blok) və ya sadəcə daxili element (displey:daxili)” demək istəyirəm, çünki onların tamamilə ümumi problemi var və bu da eyni şəkildə müalicə olunur. yol.

Kimi müalicə edirik?

Beləliklə, daxili bloklarda indi sirli girintilər var. Təbii ki, bu təkcə siyahılara aid deyil. Bir cərgədə yerləşən qrup, məsələn, “ov” da eyni şəkildə davranacaq.

Ədalətli olmaq üçün qeyd etmək lazımdır ki, IE6 və IE7 hər şeyi girintisiz göstərəcək:

Bütün brauzerlərin belə göstərilməsini istəyirəm!

Biz kimin haqlı, kimin haqsız olduğu sualının təfərrüatlarına girməyəcəyik (oxumaq - standartları əyri şəkildə dəstəkləyir), sadəcə olaraq cross-brauzer uyğunluğuna nail olacağıq. Davranış proqnozlaşdırıla biləndə çox rahatdır - mən heç bir abzas qoymadım, yəni onları çəkməyə ehtiyac yoxdur!

Əslində, hər şey sadədir - girintiləri aradan qaldırmaq üçün onların haradan gəldiyini başa düşməlisiniz!

Girintilər haradan gəlir?

Və başa düşmək çətin deyil. Teqləri bir sətirdə yazmaq kifayətdir:

  • Storki.
  • Sadəcə
  • xətlər

Möcüzələr! Girintilər öz-özünə yox oldu! Nəticə: onlar etiketlər arasında görünməz simvollar tərəfindən yaradılır - tire və ya boşluq.

Əlbəttə ki, "hər şeyi bir sətirdə yazmaq", problemin brauzerlər arası həlli olsa da, burada açıq səbəblərə görə nəzərə alınmır (kim girintisiz yazır?). Biz başqa yollar axtarırıq.

Qəfil girintilər!

Abzas konteynerdəki simvollar tərəfindən yaradıldığından, məntiqli fikir bu simvolları “zərərsizləşdirmək” olardı – onları :0-a təyin edin; (əsas odur ki, bu mülkün miras qaldığını unutmaq və nəslin özləri üçün onu kəsməkdir):

Ul( font-size:0; ) li( font-size:14px; display:inline; )

Mükəmməl həll! Xətt blokları həqiqətən bir-birinə qarşı sıxılır. Kiçik bir kosmetik problem hələ də var: bəzi brauzerlərdə (məsələn, Opera 9.5 və daha əvvəlki versiyalarda) valideynin yuxarısında və ya altındakı boşluq var (şəkildəki valideyn solğun boz-yaşıl rənglə doludur):

Şəkil böyüdülmüşdür ki, şaquli boşluqlar görünsün

Bu problem məqalədə təsvir edilənə bənzəyir və təxminən eyni şəkildə müalicə olunur: əlavə edin :0; (yenə də nəsli ilə üst-üstə düşməyi unutmayın). Beləliklə, əldə edirik:

Ul( font-size:0; line-height:0; ) li( font-size:14px; line-height:normal; /* və ya digər uyğun dəyər */ display:inline; )

İndi hər şey qaydasındadır? Elə deyil!

Problem gözləmədiyimiz yerdən gəldi

Görünür, bu girintilər həqiqətən də orada olmalıdır! Bunu dəstəkləmək üçün iki sərt arqument var:

  1. IE6-7 onları çəkmir;
  2. Bizim səylərimizə baxmayaraq, Webkit brauzerləri hələ də onları çəkir.

Hə hə! Həm Safari, həm də Chrome, yuxarıda göstərilən bütün fəndlərdən sonra, doldurmanı üç pikseldən birə endirməyə layiqdir!

İnadkar webkitlər imtina etmək istəmirlər!

Nick tərəfindən 3.07.2011 yeniləməsi. FF daha bir gizli sürpriz təqdim etdi. Səhifəni böyütsəniz, bəzən yuxarıda əlavə 1px dolgu olur. Bunu ekran qaydasını əlavə etməklə həll etmək olar: -moz-inline-stack;

Son qərar

Webkiti :-1px istifadə edərək aradan qaldırmaq mümkün oldu.Lakin heç bir zərərli yan təsir aşkar edilmədi (əlbəttə ki, nəsillərdə mülkiyyəti ləğv etməyi unutsanız).

Daxili elementlər üçün çarpaz brauzer həlli ilə yekun CSS:

Ul( font-size:0; /* horizontal interval aradan qaldırılması */ line-height:0; /* ...və bəzi brauzerlərdə şaquli */ letter-spacing:-1px; /* convince webkit's */ ) li ( font -size:14px; /* Normal dəyərləri bərpa etməyi unutmayın */ line-height:normal; letters space:normal; display:inline; )

Daxili bloklar üçün:

Ul( font-size:0; /* horizontal interval aradan qaldırılması */ line-height:0; /* ...və bəzi brauzerlərdə şaquli */ letter-spacing:-1px; /* convince webkit's */ ) li ( font -size:14px; /* Normal dəyərləri bərpa etməyi unutmayın */ line-height:normal; letter-spacing:normal; display: -moz-inline-stack!vacib; display:inline-block; // ekran:daxili; böyütmə:1; )

Unutmayın ki, böyütmə xüsusiyyəti etibarsızdır. Buna görə də, döyüş şəraitində onu ayrı bir CSS-ə qoyun, istifadə edərək bağlandı.

Bağlantılar siyahısı ilə blok yaratarkən, ümumiyyətlə aktiv keçid sahəsinin ölçüsünü artıracaq blok və ya inline-blok atributları ilə ekran xüsusiyyətindən istifadə etmək tövsiyə olunur. Böyük aktiv keçid sahələri elementlərin istifadəsini yaxşılaşdırır; böyük elementləri siçan ilə idarə etmək daha asandır.


Ekranlı elementlər: blok blok elementləri kimi göstərilir.
Ekranı olan element: inline-block digər elementlərin ətrafına sanki daxili kimi sarılan blok elementi kimi göstərilir. Məzmun blok elementi kimi, elementin özü isə daxili kimi formatlaşdırılır.

Bağlantıların siyahısı ilə sadə bir nümunəyə baxaq:

Əgər keçidlərin üslubunu dəyişdirməsəniz, onların aktiv sahələrinin ölçüsü onların içindəki mətnin ölçüsünə uyğun gəlir.


Aktiv sahə ölçüsünü ana elementin eninə çevirməklə bunu təkmilləşdirə bilərik.

Ul a ( ekran: blok; )

Biz daha yaxşısını edə bilərik.

  1. Bağlantılardan fərqli olaraq siyahı elementlərində sahələr olmadığından əmin olun.
  2. Linklərin kənarları yoxdur, çünki kənarlar elementlərin aktiv sahəsi deyil.
ul li (doldurma: 0; kənar: 0; ) ul a ( doldurma: 5px; ekran: blok; )

Məqalə açıq-aşkar şeylərdən ibarətdir, lakin biz tez-tez İnternetdə genişləndirilmiş aktiv sahələr tərəfindən "eynilməyən" bağlantı bloklarını tapa bilərik.


Orijinal məqalə: Kənarları Bağlantı Siyahılarından kənarda saxlayın Müəllif: Chris Coyier 29/11/2010