Jos cu indentări între elementele inline (și blocuri). Cum să indentați CSS

Toate elementele care apar pe o pagină HTML nu sunt altceva decât dreptunghiuri. Și practic doar două tipuri:

1. bloc (bloc), care ocupă toată lățimea unde se află și sunt separate de ceea ce este deasupra și dedesubtul lor. De exemplu asta etichete DIV,P,H.
2. încorporat (inline). De exemplu, SPAN, STRONG, EM, A și IMG.

Mese.

Rolul proprietății a crescut după trecerea de la aspectul tabelului la aspectul div. Acest lucru se datorează faptului că float permite unui dezvoltator web să includă coloane fără a fi nevoie să recurgă la un tabel. Poate lua valori dreapta, stânga, dar nu centru.

Utilizarea afișajului: bloc; proprietate sau afișare: inline; convertim un tip de dreptunghi în altul. De exemplu, o listă UL care are un număr de blocuri LI poate fi așezată pe orizontală:

• PARAGRAF
• PARAGRAF
• PARAGRAF

• PARAGRAF
• PARAGRAF
• PARAGRAF

Folosind proprietățile plutitoare dreptunghiul este bloc, dar cu trăsătură caracteristică: Lățimea sa nu se va întinde pe întregul conținut. De exemplu, un antet h3 arată astfel:

acesta este HEADER h3

Dacă setăm afișarea proprietăților: inline;, vom vedea că nu doar lățimea s-a modificat, ci și distanța deasupra și sub element:

acesta este HEADER h3

Dar dacă vreau să plasez elementul în dreapta și să adaug text-align:right; de data aceasta, atunci obținem:

acesta este HEADER h3

Și este complet diferit dacă float: corect;. Vă rugăm să rețineți că distanța deasupra și dedesubtul elementului rămâne neschimbată:

acesta este HEADER h3

Cum se vor comporta elementele de lângă titlu?

Textul de sus rămâne neschimbat deoarece un element flotant nu poate fi poziționat deasupra liniei pe care este creat.

acesta este HEADER h3

Dar textul roșu este situat sub titlu și se va înfășura în jurul lui fără a avea stiluri suplimentare. Și doar înălțimea lui h3 va fi depășită, pagina va reveni la ordinea naturală.

A B C D Mai multe elemente plutitoare vor urma succesiunea locației lor.

ABÎNG text...

Și alinierea se face de-a lungul marginii de jos a acelor litere care sunt pe aceeași parte.

A B C D Dacă mergem astfel încât curgerea în jurul elementului să se oprească dintr-un anumit moment (de aici), se aplică proprietate clară. Îl putem adăuga la o etichetă goală

Pentru a așeza uniform mai multe dreptunghiuri bloc, le dăm aceeași lățime.

Unde este distanța dintre blocuri? Dacă setați , atunci din cauza faptului că elementele plutitoare nu vor avea suficient spațiu, se vor deplasa în jos.
Problema este rezolvată prin adăugarea unui alt DIV:

Aspectul tabelar este foarte convenabil și de înțeles, motiv pentru care a apărut, probabil, afișajul său analog: tabel;. Aceeași formă se obține cu mai puțin cod.

, unde margine-spațiere specifică distanța orizontală și verticală dintre marginile celulei.

Acum puteți vedea cum este construită galeria de imagini. Sper că nimeni nu a uitat.

Link-uri către surse:

Blocuri de linie(inline-block) în multe cazuri este foarte instrument convenabil marcajele. Exemple de utilizare a acestora pot fi găsite în articole.

În același timp, asociat cu ei stâncă subacvatică. Aș spune chiar o piatră întreagă. Vrei să-l vezi? Plasați mai multe elemente inline (sau blocuri inline) pe rând.

Să presupunem că avem acest HTML:

• Storki.
• Doar
• linii

Crearea elementelor cu litere mici:

Li (afisare:inline; )

...sau blocuri de linii:

Li( display:inline-block; /* Următoarele două linii pentru IE6-7 - emulează comportamentul unui bloc inline */ //display:inline; zoom:1; )

Problemă

Majoritatea browserelor separă blocurile (elementele) inline prin indentare. Pentru ușurința percepției, am colorat puțin blocurile.

Hopa! Ce fel de indentări? Eu nu am prescris asa ceva!

Să fim de acord că în continuare voi scrie pur și simplu „bloc inline”, și înseamnă „bloc inline ( :inline-block) sau doar element inline (display:inline)”, deoarece au o problemă complet comună și este, de asemenea, tratată în același mod. cale.

Cu cine tratăm?

Deci blocurile inline au acum indentări misterioase. Desigur, acest lucru nu se aplică doar listelor. Un grup situat într-un rând, de exemplu, „ov”, se va comporta în același mod.

Pentru a fi corect, trebuie remarcat că IE6 și IE7 vor reda totul fără indentare:

Așa vreau să se afișeze toate browserele!

Nu vom intra în detalii cu privire la întrebarea cine are dreptate și cine greșește (citește - acceptă standardele în mod strâmb), pur și simplu vom atinge compatibilitatea între browsere. Este foarte convenabil atunci când comportamentul este previzibil - nu am setat nicio liniuță, ceea ce înseamnă că nu trebuie să le desenez!

De fapt, totul este simplu - pentru a elimina liniuțele, trebuie să înțelegeți de unde provin!

De unde provin indentările?

Și nu este greu de înțeles. Este suficient să scrieți etichetele într-un singur rând:

• Storki.
• Doar
• linii

Miracole! Crestaturile au dispărut de la sine! Concluzie: le generează personaje invizibileîntre etichete - cratima sau spațiu.

Desigur, „a scrie totul pe o singură linie”, deși este o soluție cross-browser la problemă, nu este luată în considerare aici, din motive evidente (cine scrie fără liniuțe?). Căutăm alte căi.

Jos cu indentări!

Deoarece indentarea este creată de caractere din container, o idee bună ar fi să „neutralizam” aceste caractere - setați-le la :0; (principalul este să nu uităm că această proprietate este moștenită și să o întrerupem pentru descendenții înșiși):

Ul( dimensiunea fontului: 0; ) li( dimensiunea fontului: 14px; afișare: inline; )

Soluția perfectă! Blocurile de linie sunt cu adevărat presate unul împotriva celuilalt. Există încă o mică problemă cosmetică: în unele browsere (de exemplu, Opera 9.5 și versiuni anterioare) există o indentație în partea de sus sau de jos în interiorul părintelui (părintele din imagine este umplut cu un gri-verde pal):

Imaginea a fost mărită astfel încât să poată fi văzute indentările verticale

Această problemă este similară cu cea descrisă în articol și este tratată aproximativ în același mod: adăugați :0; (din nou, nu uitați să vă suprapuneți cu descendentul). Deci obținem:

Ul( dimensiunea fontului: 0; înălțimea liniei: 0; ) li( dimensiunea fontului: 14px; înălțimea liniei: normal; /* sau altă valoare adecvată */ afișare: inline; )

Totul este bine acum? Nu asa!

Necazurile au venit de unde nu ne așteptam

Aparent, aceste indentări chiar ar trebui să existe! Există două argumente ferme pentru a susține acest lucru:

1. IE6-7 nu le desenează;
2. În ciuda eforturilor noastre, browserele Webkit încă le desenează.

Da Da! Atât Safari, cât și Chrome, după toate trucurile de mai sus, s-au destins să reducă pur și simplu umplutura de la trei pixeli la unul!

Webkit-urile încăpățânate nu vor să renunțe!

Actualizare 3.07.2011 de către Nick. FF a prezentat o altă surpriză ascunsă. Dacă scalați pagina, uneori există o umplutură suplimentară de 1 px în partea de sus. Acest lucru poate fi vindecat prin adăugarea regulii de afișare: -moz-inline-stack;

Decizia finala

A fost posibil să depășiți webkit folosind :-1px.Totuși, nu au fost găsite efecte secundare dăunătoare (cu excepția cazului, desigur, uitați să treceți peste proprietatea în descendenți).

CSS final cu soluție cross-browser pentru elemente inline:

Ul( font-size:0; /* eliminați spațierea orizontală */ line-height:0; /* ...și verticală în unele browsere */ letter-spacing:-1px; /* convinge webkit-ul */ ) li ( font -size:14px; /* Nu uitați să restabiliți valorile normale */ line-height:normal; letter-spacing:normal; display:inline; )

Pentru blocuri inline:

Ul( font-size:0; /* eliminați spațierea orizontală */ line-height:0; /* ...și verticală în unele browsere */ letter-spacing:-1px; /* convinge webkit-ul */ ) li ( font -size:14px; /* Nu uitați să restabiliți valorile normale */ line-height:normal; letter-spacing:normal; display: -moz-inline-stack!important; display:inline-block; // afișare:inline ; zoom:1; )

Nu uitați că proprietatea zoom este nevalidă. Prin urmare, în condiții de luptă, scoate-l și CSS separat, conectat folosind .

Aspect bloc folosit adesea la crearea unui site web sau blog. Ca o consecință a acestui fapt, este adesea necesară indentarea blocurilor. Din acest motiv, aproximativ cum să indentați în CSS descris în detaliu în această lecție. Pentru browser, fiecare etichetă este un container care are conținut, umplutură, marginile externe, precum și un cadru. În această lecție vom învăța cum să facem intern și marginile, să luăm în considerare principalii lor parametri.

Figura de mai jos arată clar parametrii de indentare a blocului:

După cum puteți vedea, liniuțele pot fi făcute în patru direcții: liniuță de sus (sus), liniuță de jos (jos), liniuță din stânga (stânga) și liniuță din dreapta (dreapta). Unitățile de măsură pot fi pixeli, procente și altele. unități CSS- mai multe despre ei. Acest tutorial folosește pixeli.

Blocuri de umplutură

Proprietatea responsabilă pentru completarea în CSS este căptușeală. Deci, să ne uităm la un exemplu de setare a umpluturii interne pentru un bloc:

padding-top: 5px; /*padding-ul de sus*/ padding-left: 8px; /*padding stânga*/ padding-dreapta: 8px; /*padding dreapta*/ padding-bottom: 5px; /*căptușeală inferioară*/

ÎN în acest exemplu Căptușeala internă este setată separat pentru fiecare parte a blocului. În plus, există mai multe moduri de a seta indentarea în CSS:

margine: 5px 8px 5px 8px; /*margini sus, dreapta, jos, stânga*/ margine: 5px 8px 5px; /*descrie marginile de sus, stânga, dreapta, jos*/ margine: 5px 8px; /*descrie marginile de sus și de jos, din dreapta și din stânga*/ margine: 7px; /*descrie toate umpluturile de 7px*/

Este mai ușor să-l amintești pe primul și ultimele moduri. În primul caz, indentațiile sunt plasate în sensul acelor de ceasornic (sus, dreapta, jos, stânga) - putem specifica orice cantitate de indentare; în cel din urmă caz, indentațiile de pe toate părțile vor fi aceleași.

Blocați marginile

Proprietatea responsabilă pentru marjele în CSS este marginea. Exemple de marje în CSS:

margine-sus: 5px; /*margine de sus*/ margine-stânga: 10px; /*marginea din stânga*/ marginea-dreapta: 10px; /*margine din dreapta*/ margine-jos: 5px; /*marginea de jos*/

umplutură: 5px 10px 5px 10px; /*margini sus, dreapta, jos, stânga*/ padding: 5px 10px 5px; /*descrie umplutura de sus, stânga și dreapta, de jos*/ padding: 5px 10px; /*descrie umplutura de sus și de jos, dreapta și stânga*/ padding: 7px; /*descrie toate marginile de 7px*/

Prin urmare, cum să indentați în CSS- întrebarea nu este dificilă, dar foarte relevantă. Pentru a înțelege mai bine informațiile descrise mai sus, ar trebui să rețineți că există două proprietăți: padding - indentări interne și margine - indentări externe. De asemenea, după cum știți deja, există mai multe moduri de a seta indentări, le puteți utiliza.

În acest articol aș dori să vă spun cum să plasați corect câmpuri(căptușeală) și indentare(marja) în CSS.

În primul rând, să ne amintim definiția marginilor și a umpluturii conform specificației W3C. În modelul cutiei, marginile sunt distanța dintre conținut și marginea cutiei. Iar padding este distanța dintre marginea unui bloc și marginea unui element adiacent sau părinte.

Deci, dacă chenarul și fundalul elementului nu sunt specificate, atunci nu există nicio diferență, folosiți proprietatea de umplutură sau marginea pentru a seta indentări, dar cu condiția ca lățimea (lățimea) și înălțimea (înălțimea) elementului să nu fie setate și algoritmul pentru calcularea dimensiunilor conținutului utilizând proprietatea box-sizing să nu fie modificat.

În orice caz, rețineți că marginile pot fi incluse sau nu în lățimea sau înălțimea elementului. Indentările sunt întotdeauna stabilite în afara elementului.

Acum să vedem cum să plasăm corect marginile și spațiul dintre elemente. Să luăm ca exemplu următorul bloc.

Acesta este blocul de știri. Acesta constă dintr-un antet, o listă de știri și un link „Alte știri”. Să le dăm următoarele nume de clasă: news__title, news__list și news__more-link.

Deoarece fiecare dintre aceste elemente are umplutură egală la stânga și la dreapta, este mai bine să setați marginile bloc părinte, în loc să setați marginile din stânga și din dreapta pentru fiecare element separat.

Știri ( umplutură: 20px 25px; )

Astfel, dacă trebuie să modificați valoarea câmpurilor din dreapta și din stânga, acest lucru va trebui făcut Intr-un loc. Și atunci când adăugați un nou element în interiorul blocului de știri, acesta va avea deja indentările necesare în stânga și dreapta.

Se întâmplă adesea ca toate elementele dintr-un bloc să aibă aceeași umplutură în stânga și în dreapta, cu excepția unuia, care nu ar trebui să aibă deloc padding, de exemplu, din cauza fundalului. În acest caz, puteți seta umplutura negativă pentru element. Atunci nu va trebui să eliminați câmpurile din interiorul blocului pentru alte elemente.

Acum trebuie să setați marginile verticale între elemente. Pentru a face acest lucru, trebuie să determinați care dintre elemente este obligatoriu. Evident, un bloc de știri nu poate exista fără o listă de știri; în același timp, este posibil să nu existe un link „Alte știri”; titlul poate fi, de asemenea, eliminat, de exemplu, atunci când designul este schimbat.

Ținând cont de acest lucru, am stabilit indentarea din partea de jos pentru titlu și indentarea din partea de sus pentru linkul „Alte știri”.

News__title ( margin-bottom: 10px; ) .news__more-link ( margin-top: 12px; )

Am putea obține același rezultat extern adăugând umplutură în partea de sus și de jos pentru lista de știri.

News__list ( marjă: 10px 0 12px 0; )

Acum trebuie să setați indentațiile dintre articolele de știri individuale. Din nou, vă rugăm să rețineți că numărul de știri poate varia și este posibil să existe doar o știre listată.

Puteți seta o liniuță de sus pentru fiecare știre, cu excepția primei, sau o liniuță de jos pentru fiecare știre, cu excepția ultimei. Prima opțiune este de preferat deoarece pseudo-selectorul:first-child a fost adăugat în specificația CSS 2.1 și are suport mai larg, spre deosebire de pseudo-selectorul:last-child, care a fost adăugat doar în specificația CSS 3.0.

News__list-item ( margin-top: 18px; ) .news__list-item:first-child ( margin-top: 0; )

Astfel, plasarea corectă a marginilor și indentărilor vă permite să modificați în mod flexibil aspect orice bloc fără a face modificări stilurilor și fără încălcări în design. Cel mai important lucru este să determinați care elemente de bloc sunt principalele ( obligatoriu), și care opțional.

Uneori nu ne putem baza pe elementele necesare. De exemplu, avem o fereastră pop-up, în interiorul căreia pot fi afișate niște titluri și text. Mai mult, în unele cazuri poate să nu existe text, iar în unele cazuri să nu existe titlu. Adică, ambele elemente sunt opționale.

În acest caz, puteți utiliza calea următoare sarcinile de indentare.

Popup__header + .popup__text ( margine-sus: 15px; )

Apoi indentarea va apărea numai dacă sunt folosite ambele elemente. În cazul afișării doar a titlului sau doar a textului, nu va exista indentare suplimentară.

Margini verticale restrânse

O altă nuanță despre care nu toată lumea știe este legată de spațiile verticale dintre blocurile adiacente. Definiția indentării pe care am dat-o mai sus spune că indentarea este distanța dintre frontiere blocurile actuale și învecinate. Astfel, dacă plasăm două blocuri unul sub celălalt și dăm unuia dintre ele o marjă inferioară de 30px și celuilalt o margine superioară de 20px, marja dintre ele nu va fi de 50px, ci de 30px.

Adică, indentările se vor suprapune, iar indentarea dintre blocuri va fi egală cu cea mai mare indentare, și nu cantitatea de indentare. Acest efect se mai numește și „colaps”.

Vă rugăm să rețineți că indentațiile orizontale, spre deosebire de cele verticale, nu „se prăbușesc”, ci sunt rezumate. Câmpurile (padding) sunt de asemenea însumate.

Știind despre „colapsul” indentărilor, putem folosi această caracteristică în avantajul nostru. De exemplu, dacă trebuie să indentăm titlurile și textul din interiorul unui articol, atunci pentru antetul de la primul nivel vom seta indentarea de jos la 20px, iar pentru al doilea nivel indentarea de sus este de 20px și cea de jos este de 10px, iar pentru toate paragrafele am stabilit indentarea de sus la 10px.

H1 ( margin-jos: 24px; ) h2 ( margin-top: 24px; margin-bottom: 12px; ) p ( margin-top: 12px; )

Acum titlul h2 poate fi plasat fie după titlul h1, fie după paragraf. În orice caz, marja de sus nu va depăși 24 px.

Reguli generale

Pentru a rezuma, aș dori să enumerez regulile pe care le respect atunci când aranjez marginile și indentările.

1. Dacă elementele adiacente au aceleași indentări, atunci este mai bine să le setați container părinte, nu elemente.
2. Când setați indentări între elemente, ar trebui să luați în considerare dacă elementul este obligatoriu sau opțional.
3. Pentru o listă de elemente similare, nu uitați că numărul de elemente poate varia.
4. Fiți conștienți de umplutura verticală și utilizați această funcție acolo unde vă va beneficia.

Etichete: Adăugați etichete