Cum se schimbă distanța dintre paragrafele de text?

Când utilizați eticheta

Indentările sunt adăugate automat deasupra și sub paragraful de text. Acest lucru se face pentru a separa vizual un bloc de text de celălalt. Este clar că valorile implicite de indentare nu sunt întotdeauna satisfăcătoare, așa că uneori trebuie să fie reduse sau mărite. Pentru a face acest lucru, puteți utiliza marja de proprietate universală, aceasta determină indentațiile de pe toate laturile paragrafului sau margin-top pentru indentarea din partea de sus și margin-bottom pentru indentarea din partea de jos.

Aspectul bloc este adesea folosit 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ă, margini exterioare și o chenar. În această lecție vom învăța cum să facem indentări interne și externe și 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 alte unități CSS - aflați mai multe despre ele. Acest tutorial folosește pixeli.

Blocuri de umplutură

Proprietatea responsabilă pentru indentarea î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; /*umplutură de jos*/

În acest exemplu, umplutura 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 interne de 7px*/

Este mai ușor să vă amintiți prima și ultima metodă. Î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, indentările 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.

Aspectul CSS a fost întotdeauna dreptunghiular. Orice linii netede sunt responsabilitatea dezvoltatorului. Regulile de stil oferă suficiente opțiuni pentru a da paginii o formă netedă în limitele rezoluției ecranului. Dar orice element de aspect este întotdeauna un dreptunghi în care aranjarea informațiilor este guvernată de regulile CSS.

Umplutura pe toate părțile este importantă pentru fiecare element de pagină atunci când este poziționat în mod absolut, iar umplutura superioară CSS este definită în mod specific, deoarece contează pentru diferite elemente, în special pentru cele inline.

Reguli de bază de poziționare

Un element bloc are o regulă de marjă, o regulă de umplutură pentru elementele din interiorul său și o lățime a marginii care poate fi, de asemenea, utilizată.

Indentarea din partea de sus este de o importanță deosebită. CSS într-un bloc asociază regulile de umplutură cu reguli pentru elementele poziționate absolut și relativ în acel bloc.

O practică obișnuită pentru regulile CSS: puteți specifica aceeași umplutură pe toate părțile, în perechi sus/jos și dreapta/stânga, sau pentru fiecare parte separat. De exemplu,

• marja: 10px;
• umplutură: 10px20px;
• umplutură: 10px20px30px40px.

În primul caz, este stabilită indentarea elementului de pe părțile laterale ale containerului exterior în care este amplasat. În al doilea caz, marginile din partea de sus și de jos sunt 10px, în stânga și în dreapta - 20px. În al treilea caz, dimensiunea indentărilor este indicată pe toate părțile: sus, dreapta, jos și stânga.

În toate aceste cazuri, indentarea CSS de sus este de 10 px.

Reguli care schimbă poziția elementelor

Dacă un element de aspect nu este poziționat în mod absolut, acesta este poziționat în ordinea generală de formare a paginii.

Dacă definim umplutură pe CSS de sus în elementul scCurrInfo, obiectivul va fi atins, dar dacă la nivelul li nu va fi.

În acest exemplu, folosind regula de umplutură: 40px; necesită o reducere adecvată a regulilor de lățime și înălțime cu 80px. În caz contrar, dimensiunea blocului scCurrInfo va depăși limitele blocului exterior.

Dacă eliminăm regula de umplutură din descrierea scCurrInfo, dar o adăugăm cu o valoare de 20px la descrierea stilului articolului din listă, vom obține doar liniuță de sus. CSS nu va aplica această valoare altor părți.

Desigur, această utilizare a regulii de indentare se aplică fiecărui element li.

Practici generale de formatare a conținutului

Unii dezvoltatori ating perfecțiunea prin așezarea paginilor folosind elemente de bloc. Aparent, aceasta este o practică clasică - să începi cu tabele și să închei propriul proces educațional cu blocuri.

Libertatea inerentă amenajării blocurilor este fascinantă, iar imaginația dezvoltatorului poate să nu fie limitată de reguli stricte ale tabelului: numai rânduri, doar celule, îmbinând doar orizontal și vertical. Nimic specific ideilor relaționale.

Între timp, tabelele, pe lângă dezavantajele evidente, au multe avantaje calitative. La crearea padding-ului în partea de sus, CSS ține cont de padding-ul din stânga, dreapta (jos este un moment special). Regulile pentru celulele tabelului vă permit să controlați atât alinierea verticală, cât și orizontală. Folosind stiluri de rând și combinându-le cu stiluri de celule, puteți crea vizualizări complexe ale conținutului.

Reprezentarea obișnuită a unei pagini sub formă de dreptunghiuri nu împiedică deloc să fie prezentată sub formă de tabel. Acestea sunt și dreptunghiuri, dar sunt și celule de tabel, adică au propriile reguli care completează regulile blocurilor.

Poziționare absolută

Bloc cu regula POZIȚIA: absolută ; va fi situat într-o locație determinată de coordonatele sale relativ la blocul în care se află.

O trăsătură caracteristică a regulilor CSS este că „practica este cel mai bun criteriu al adevărului” în majoritatea cazurilor, mai ales atunci când este necesară compatibilitatea între browsere și aspectul se face manual, este de preferat să studieze manuale cu drepturi depline pe foi de stil în cascadă.

Utilizarea tabelelor duce adesea la probleme de schimbare a conținutului celulei. O deplasare similară în cadrul unui bloc nu afectează întotdeauna toate elementele. Experimentând, puteți obține rezultatul dorit. O sarcină banală: cum eliminarea umpluturii superioare nu este întotdeauna o soluție banală pentru CSS.

În unele cazuri, atunci când trebuie să așezați elemente de pagină în măruntaiele unui sistem popular de gestionare a conținutului site-ului web, trebuie să acordați atenție nu numai practicii experimentale, ci și să priviți experiența colegilor dvs.

Bună ziua, dragi cititori ai blogului! Astăzi vom continua să învățăm despre foile de stil în cascadă sau CSS. În articolele anterioare, am examinat deja în termeni generali aspectul bloc al site-ului. Drept urmare, am început să avem pagini web destul de profesionale, dar le lipsea ceva. Dar, cel mai probabil, le lipsesc indentări și rame. Astăzi ne vom uita la regulile de stil de margine, padding și chenar, care vă permit să setați indentări și cadre pentru elementele html.

Opțiuni de umplutură CSS

Cu ajutorul foilor de stil în cascadă, este posibil să setați două tipuri de indentări.

1.Indentare este distanța de la granița imaginară a elementului până la conținutul său. Valoarea distanței este specificată cu ajutorul parametrului căptușeală. Această indentare aparține elementului însuși și se află în interiorul acestuia.

2. Marja— distanța dintre marginea elementului curent al paginii web și marginile elementelor învecinate sau elementul părinte. Mărimea distanței este controlată de proprietate marginea. Această indentare este situată în afara elementului.

Pentru claritate, poza:

De exemplu, luați în considerare o celulă plină cu text. Apoi padding-ul este distanța dintre chenarul imaginar al celulei și textul pe care îl conține. Și marginea exterioară este distanța dintre marginile celulelor adiacente. Să începem cu umplutura.

Umplutură în CSS folosind padding (sus, jos, stânga, dreapta)

Proprietățile stilului padding-left, padding-top, padding-right și padding-bottom vă permit să setați valorile padding-ului, respectiv, în stânga, sus, dreapta și jos a unui element de pagină web:

padding-top | padding-dreapta | captuseala-fund | padding-left: valoare | interes | moşteni

Cantitatea de indentare poate fi specificată în pixeli (px), procent (%) sau alte unități acceptabile pentru CSS. La specificarea procentelor, valoarea este calculată din lățimea elementului. Valoarea de moștenire indică faptul că este moștenită de la părinte.

De exemplu, pentru paragraful curent, am aplicat o regulă de stil care setează umplutura din stânga la 20 de pixeli, umplutura de sus la 5 pixeli, umplutura din dreapta la 35 de pixeli și umplutura de jos la 10 pixeli. Intrarea regulii va arăta astfel:

p.test(
padding-stânga:20px;
padding-top:5px;
padding-dreapta:35px;
padding-bottom:10px
}

Regula de umplutură compozită vă permite să specificați indentări pe toate părțile unui element de pagină web simultan:

umplutura:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

O regulă prefabricată permite utilizarea uneia, două, trei sau patru valori, separate printr-un spațiu. În acest caz, efectul depinde de numărul de valori:

• dacă specificați o valoare, aceasta va seta cantitatea de indentare pe toate părțile elementului de pagină;
• dacă specificați două valori, prima va seta cantitatea de indentare în partea de sus și de jos, iar a doua - la stânga și la dreapta;
• dacă specificați trei valori, atunci prima va determina cantitatea de indentare în partea de sus, a doua - în stânga și în dreapta, iar a treia - în partea de jos;
• dacă sunt specificate patru valori, prima va seta cantitatea de indentare în partea de sus, a doua la dreapta, a treia în partea de jos și a patra la stânga.

Astfel, regula CSS de mai sus poate fi scurtată cât mai mult posibil și scrisă după cum urmează:

p.test( umplutură: 5px 35px 10px 20px)

Proprietatea sau marjele în CSS

Atributele stilului margin-left, margin-top, margin-right și margin-bottom vă permit să setați valorile marginii, respectiv stânga, sus, dreapta și jos:

margine-top | margine-dreapta | margine-jos | margine-stânga:<значение>|auto|moştenire

După cum sa menționat mai sus, marginea este distanța de la marginea elementului curent până la marginea elementului adiacent sau, dacă nu există elemente învecinate, până la marginea internă a containerului părinte.

Cantitatea de indentare poate fi specificată în pixeli (px), procent (%) sau alte unități permise pentru CSS:

p(
margine-stânga: 20px;
}
h1(
marja-dreapta:15%;
}

Valoarea auto înseamnă că dimensiunea indentării va fi calculată automat de browser. Dacă utilizați notația procentuală, indentările sunt calculate în funcție de lățimea containerului părinte. Mai mult, acest lucru se aplică nu numai pentru margine-stânga și margine-dreapta, ci și pentru margine-sus și margine-jos, marjele procentuale vor fi calculate în funcție de lățimea, nu de înălțime, a containerului.

Este permisă utilizarea ca valori ale indentărilor externe valori negative:

p(
margine-stânga:-20px;
}

Dacă, cu valori pozitive ale indentării, elementele vecine sunt îndepărtate, atunci cu o valoare negativă, blocul vecin se va ciocni cu elementul pentru care am setat o astfel de indentare negativă.

De asemenea, putem specifica umplutura folosind atributul style marginea. Setează valorile de indentare simultan pe toate părțile unui element de pagină web:

marja:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Când se specifică una, două, trei sau patru valori de umplutură, această proprietate respectă aceleași legi ca și regula de umplutură.

Opțiuni de chenar folosind proprietatea Border

La setarea cadrelor, există trei tipuri de parametri:

• border-width — grosimea chenarului;
• border-color — culoarea chenarului;
• border-style — tipul de linie cu care va fi desenat cadrul.

Să începem cu parametrul de grosime a cadrului:

border-width: [valoare | subțire | mediu | gros] (1,4) | moşteni

Grosimea ramei poate fi specificat în pixeli sau în alte unități disponibile în CSS. Variabilele subțire, mediu și gros setează grosimea marginii la 2, 4 și, respectiv, 6 pixeli:

lățime margine: medie;

Ca și în cazul proprietăților de umplutură și margine, parametrul border-width permite una, două, trei sau patru valori, setând astfel lățimea chenarului pentru toate părțile simultan sau pentru fiecare parte separat:

lățime chenar: 5px 3px 5px 3px

Pentru paragraful curent, faceți grosimea marginii de sus 1px, dreapta 2px, jos 3px și stânga 4px folosind regula (border-width: 1px 2px 3px 4px;)

Folosind atributele de stil border-left-width, border-top-width, border-right-width și border-bottom-width, puteți seta grosimea laturilor din stânga, sus, dreapta și, respectiv, de jos ale chenarului:

border-left-width|border-sus-width|border-right-width|border-bottom-width: subțire|mediu|gros|<толщина>|moştenire

Următorul parametru este culoarea marginii cu care puteți controla culoarea cadrului:

culoare-chenar: [culoare | transparent] (1,4) | moşteni

Proprietatea vă permite să setați culoarea chenarului pentru toate părțile elementului simultan sau numai pentru cele specificate. Ca valoare, puteți utiliza metodele folosite pentru specificarea culorilor în HTML: cod hexazecimal, cuvinte cheie etc.:

p (lățimea chenarului: 2px; culoarea chenarului: roșu)

Valoarea transparent setează culoarea chenarului transparent și moștenește valoarea părintelui. În mod implicit, dacă culoarea chenarului nu este specificată, se va folosi cea folosită pentru fontul din interiorul elementului.

Folosind atributele stilului border-left-color, border-top-color, border-right-color și border-bottom-color, puteți seta culoarea părților din stânga, sus, dreapta și, respectiv, de jos ale chenarului:

border-left-color|border-top-color|border-right-color|border-bottom-color: transparent|<цвет>|moştenire

Și ultimul parametru specifică stilul de margine tipul de cadru:

chenar-stil: (1,4) | moşteni

Tipul de cadru poate fi specificat pentru toate laturile unui element simultan sau numai pentru cele specificate. Puteți utiliza mai multe cuvinte cheie ca valori. Aspectul va depinde de browserul utilizat și de grosimea cadrului. Sens nici unul este utilizat în mod implicit și nu afișează cadrul, iar grosimea acestuia este setată la zero. Valoarea ascunsă are același efect. Cadrul rezultat pentru alte valori, în funcție de grosime, este prezentat în tabelul de mai jos:

Atributele stilului border-left-style, border-top-style, border-right-style și border-bottom-style specifică stilul liniilor care vor fi desenate pe părțile din stânga, sus, dreapta și jos ale chenarului, respectiv:

border-left-style|border-top-style|border-right-style|border-bottom-style: niciunul|ascuns|punctat|liniat|solid|dublu|canelură|cresta|inserție|început|moștenire

Ca și în cazul opțiunilor de umplutură și umplutură, există proprietate generică de frontieră. Vă permite să setați simultan grosimea, stilul și culoarea chenarului în jurul unui element:

hotar: | moşteni

Valorile pot fi în orice ordine, separate prin spații:

td (chenar: 1px galben solid)

Pentru a seta un chenar numai pe anumite laturi ale unui element, există proprietățile bordur-sus, border-bottom, border-left, border-right, care vă permit să setați parametri pentru părțile de sus, jos, stânga și dreapta ale cadre, respectiv.

Rămâne doar să rezumam:

• pentru sarcina umplutura folosim proprietatea căptușeală;
• pentru setari marginile exista o regula marginea;
• parametrii cadrului sunt specificate folosind atributul frontieră.

Observ că toate aceste proprietăți CSS măresc dimensiunea elementului paginii web. Prin urmare, dacă modificăm grosimea chenarului sau dimensiunea căptușelii containerelor bloc care formează designul paginii web, va trebui să modificăm dimensiunea acestor containere în mod corespunzător, în caz contrar se pot muta și designul va fi spart.

Asta e tot, ne vedem data viitoare!

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in voluptate henderit. "Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Paragraful 1.10.32 „de Finibus Bonorum et Malorum”, scris de Cicero în anul 45 d.Hr. „Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. magni dolores eos qui ratione voluptatem sequi nesciunt Ut enim ad minima veniam , QUIS NOSTRUM Exercitational Ullam Corporis Suscipit Laboriosam, Nisi Ut Aliquid Ex Ea Commodi Consequatur, Vel Illum Qui Dolorem Eum Fugiat Volup? Traducere în engleză 1914, H. Rackham „Dar trebuie să vă explic cum s-a născut toată această idee greșită de a denunța plăcerea și de a lăuda durerea și vă voi face o relatare completă a sistemului și vă voi explica învățăturile reale ale marelui explorator. al adevărului, stăpânul constructor al fericirii umane Nimeni nu respinge, nu-i place sau evită plăcerea însăși, pentru că este plăcere, ci pentru că cei care nu știu să urmărească plăcerea în mod rațional întâmpină consecințe extrem de dureroase. oricine iubește sau urmărește sau dorește să obțină durere de la sine, pentru că este durere, dar pentru că ocazional apar împrejurări în care uleiul și durerea îi pot procura o mare plăcere. Să luăm un exemplu banal, care dintre noi întreprinde vreodată exerciții fizice laborioase, decât să obțină vreun avantaj din ea, dar cine are vreun drept să-și reproșeze un bărbat care alege să se bucure de o plăcere care nu are consecințe supărătoare sau unul care evită o durere care nu produce o plăcere rezultată? Paragraful 1.10.33 „de Finibus Bonorum et Malorum”, scris de Cicero în anul 45 d.Hr. „At Vero EOS et Accusamus et Iusto dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atti quos Dolores molestias experim Ecati Cupiditate Non Provider, Similique Sunt in Culpa Qui Officia Deserunt Mollitia Animi, ID Laborum et Dolorum Fuga re temporale distinctio facilits. Na et expedita tempore distinctio facilites. , cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat." Traducere în engleză 1914, H. Rackham „Pe de altă parte, denunțăm cu indignare dreaptă și antipatice pe oamenii care sunt atât de amăgiți și demoralizați de farmecele plăcerii momentului, atât de orbiți de dorință, încât nu pot prevedea durerea și necazul sunt obligați să urmeze și vina egală aparține celor care eșuează în datoria lor prin slăbiciune de voință, ceea ce este la fel ca prin scăderea de ulei și durere. Aceste cazuri sunt perfect simple și ușor de distins fără obstacole și când nimic nu ne împiedică să putem face ceea ce ne place cel mai mult, fiecare plăcere trebuie să fie binevenită și orice durere evitată. fi repudiat și supărările acceptate. Prin urmare, înțeleptul ține întotdeauna în aceste chestiuni acest principiu al selecției: el respinge plăcerile pentru a-și asigura alte plăceri mai mari, sau îndură dureri pentru a evita durerile mai rele."