Astăzi vom vorbi puțin cu dvs. despre principiile de aspect, și anume, cum să organizați indentarea pe site-ul dvs. pentru anumite elemente.
Elementul în cauză care trebuie indentat poate fi text, o imagine, un tabel sau orice alt element HTML. Principalul lucru este să urmați câteva reguli importante, despre care vă voi spune acum.
Dacă tocmai vă creați site-ul, vă recomand să inserați următoarele proprietăți în partea de sus a foii de stil principale:
* (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;) *: before, *: after (-webkit-box-sizing: border- box; -moz-box-sizing: border-box; box-sizing: border-box;)
De ce este necesar acest lucru, întrebi? Răspund la întrebarea dvs. cu un exemplu ilustrativ.
Să presupunem că aveți un element de aspect de genul acesta:
Așa ar arăta opțiunea fără a utiliza proprietățile descrise mai sus (elementul de sus) și a le folosi (elementul de jos):
Ce poți vedea aici? Că lățimea elementului din prima versiune (fără a utiliza proprietăți) a devenit mai mare decât cea specificată datorită căptușelii adăugate, ceea ce nu este complet convenabil și corect în ceea ce privește aspectul.
Opțiunea cu proprietăți este mult mai plăcută din punct de vedere estetic, dar merită să o folosiți în mod conștient, deoarece atunci când le adăugați la un site gata făcut, riscați să obțineți un design prost și o „durere de cap” sub forma aducerii tuturor în formă adecvată. Toate proiectele pe care le-am condus întâmplător de la zero nu au fost lipsite de aceste proprietăți.
Și acum, de fapt, să vorbim despre opțiunile pentru organizarea indentării elementelor de pe site-ul dvs. cu exemple ilustrative.
Completarea cu proprietatea CSS „padding”
Pentru a înțelege întreaga logică a lucrurilor, să luăm ca exemplu următorul fragment de aspect:
cu stilurile lor:
Test_div (lățime: 250 px; chenar: 1 px solid;)
Versiunea vizuală este următoarea:
Care este proprietatea " căptușeală"? Ajută la organizarea căptușelii pe elementele specificate. Să adăugăm un aspect de 10 px la aspectul nostru:
Test_div (lățime: 250 px; chenar: 1 px solid; umplutură: 10 px; // umplutură 10 px)
Vizual, se dovedește așa:
Numărul 10 din proprietate înseamnă că în interiorul elementelor specificate, pe fiecare din cele patru fețe ale acestora, trebuie adăugată o liniuță de 10 px. Pixelii (px) pot fi înlocuiți cu procente sau alte valori CSS acceptate.
Există două opțiuni în total indicarea laturilor de la care să se indenteze.
Primul - aceasta cu o indicație explicită a părților:
Padding-top: 10 px; // umplutură de 10 px în partea de sus, dreapta: 10 px; // umplutură de 10 px în partea de jos dreaptă: 10 px; // Căptușeală de jos 10 px umplutură-stânga: 10 px; // umplutură de 10 px în stânga
În acest caz, fiecare parte își folosește propria proprietate. ȘI al doilea:
Căptușeală: 10px 0 0 0; // 10px umplutură deasupra, toate celelalte sunt 0px umplutură: 10px 0; // 10px căptușeală superioară și inferioară și 0px căptușeală pe căptușeala laterală: 0 10px; // 0px căptușeală în partea de sus și în jos și 10 px în lateral
Aici apare o simplă enumerare a valorilor, fiecare dintre ele corespunzând unei laturi diferite. Laturile sunt așezate așa: prima valoare este sus, a doua este dreaptă, a treia este jos și a patra este stângă, adică totul este în sensul acelor de ceasornic.
Dacă există două valori (sus și dreapta), atunci aceasta înseamnă că valorile oglindă ale acelorași valori merg în jos și în stânga, și numai așa. Totul pare a fi clar. Dacă nu este nevoie să setați liniuța pentru unele dintre laturi, setați valoarea pentru această latură la „0”. Îmi place mai mult această opțiune, deoarece este mai compactă, dar în eforturile mele am folosit prima opțiune.
Acest tip de indentare este bun pentru separarea textului, a conținutului celulei de tabel și a altor informații de text. Pentru a separa elementele în sine, similar cu cele din exemplul de mai sus, există o altă proprietate.
Completarea exterioară cu proprietatea CSS „margin”
O trăsătură distinctivă a proprietății " marjă„Este ceea ce se adaugă umplutura în afara elementului, adică în exterior.
Există, de asemenea, două opțiuni pentru adăugare aici.
Primul - cu o indicație explicită a părții:
Margin-top: 10 px; // umplutură de 10 px în marginea din dreapta sus: 10 px; // Marja de 10 px pe marginea din dreapta-jos: 10 px; // Umplutură de jos 10px margine-stânga: 10px; // umplutură de 10 px în stânga
Al doilea - cu o enumerare a valorilor, fiecare dintre ele corespunzând laturii sale:
Marja: 10px 0 0 0; // 10px marja superioară, restul este 0px margin: 10px 0; // umplutură de 10 px în partea de sus și de jos și 0 px în marginea laterală: 0 10 px; // Căptușeala exterioară are 0 px în partea de sus și în jos și 10 px în lateral
Nu voi descrie toate nuanțele de a lucra cu regulile aici, totul este la fel ca la proprietate “ căptușeală», Despre el este scris mai sus.
Folosim marja cu următoarea valoare:
Test_div (lățime: 250 px; chenar: 1 px solid; margine: 10 px; // Îmbunătățirea 10 px)
Vizual, va arăta astfel:
După cum puteți vedea din exemplu, în acest caz, se adaugă o liniuță externă, separând elementele indicate.
O caracteristică importantă: Dacă ați privit cu atenție rezultatul, s-ar putea să fi observat că umplutura adiacentă a elementelor nu este rezumată. Adică, dacă primul element are o umplutură exterioară de jos de 10 px, iar al doilea are o umplutură exterioară de sus cu aceeași valoare, atunci distanța totală dintre ele va fi, de asemenea, 10 px. Dacă 10 și respectiv 15, atunci totalul este 15 și așa mai departe.
Acest tip de indentare este adesea folosit în text, și anume în proiectarea paragrafelor, precum și în elementele care au margini vizibile.
Dar ambele proprietăți nu se limitează doar la aceste elemente. Tu alegi singur opțiunile pentru a le folosi, am încercat doar să-ți ofer un background despre ele.
Anya a scris următorul cod (exemplu 1) și a obținut pagina prezentată în fig. 1. Dar Anya nu are nevoie de spațiu între blocuri, precum și la dreapta și la stânga blocurilor. Ce modificări ale codului sunt necesare pentru aceasta?
Există prea multă indentare între titlu și textul principal, cum o pot reduce?
La paragraf (etichetă
) și titlu (tag
) adaugă automat umplutura de sus și de jos, care se adaugă la o distanță mare între antet și text. Pentru a reduce cantitatea de umplere, trebuie să adăugați în mod explicit proprietatea marginii de jos la selectorul H1. Mai mult, puteți seta o valoare pozitivă, zero sau negativă. În acest fel, este ușor să setați valoarea de indentare dorită.
Cum indentez primul rând pentru fiecare paragraf?
Când trebuie să configurați indentarea de paragraf, cel mai bine este să utilizați proprietatea stilului de indentare text. Valoarea sa determină cât de mult trebuie să deplasați textul primei linii spre dreapta poziției sale inițiale. Lățimea blocului de text nu se modifică și rămâne setată inițial. Cantitatea de indentare poate fi specificată în pixeli, procente sau alte unități disponibile (exemplu 1).
Cum se elimină indentarea de sus și de jos din listă?
Utilizați proprietatea stilului margin-top și margin-bottom pentru selectorul UL sau OL, în funcție de tipul listei. De asemenea, puteți utiliza proprietatea de marjă generică.
Cum schimb indentarea pe o pagină web?
Completarea paginii web, deși nu este vizibilă, nu permite conținutului să se potrivească perfect cu marginile ferestrei browserului pentru o lectură confortabilă. Puteți seta propria valoare de marjă modificând proprietatea de marjă a selectorului de corp.
Cum pot elimina căptușeala în jurul unui formular?
Când adăugați un formular printr-o etichetă
