Cum se face indentare verticală în html. Formatarea unui paragraf HTML
Bine ati venit pe blogul meu. Css (Cascading Style Sheets) oferă o mulțime de opțiuni de personalizare aspect pagini web. Astăzi aș dori să vă arăt pe scurt cum să definiți în CSS umplutura din partea de sus sau pe orice altă parte pentru orice element.
MarjaMarja este setată folosind proprietățile marjei. Cu acesta, puteți seta margini pe toate cele patru laturi simultan sau puteți utiliza alte proprietăți: margine-sus, margine-stânga, margine-dreapta, margine-jos, care vă permit să o creați doar pe o singură parte.
Marja determină distanța la care marginea selectată a unui element va fi decalată față de alte elemente de pe pagină. De exemplu, intrarea:
P, div( Marja-top: 20px; )
Aceasta înseamnă că toate blocurile și paragrafele vor fi indentate în partea de sus cu 20 de pixeli, adică marginea lor superioară va fi îndepărtată de elementele adiacente cu această distanță.
Marginile pot fi scrise pe fiecare parte folosind o singură proprietate de marjă, la care sunt scrise 4 valori pe rând:
Div( Marja: 20px 10px 20px 10px; )
Căptușeala va fi dată de la marginile de sus, dreapta, jos și respectiv stânga. Deoarece în acest caz sunt egale pe laturi opuse, am putea scrie și așa:
Div( Marja: 20px 10px; )
Prima valoare este marja din partea de sus și de jos, iar a doua este marja din laterale.
IndentareCăptușeala interioară funcționează diferit - nu îndepărtează blocul de alte elemente, ci adaugă acel spațiu în interiorul elementului, îndepărtând conținutul blocului de marginile acestuia. Este confortabil. Unde ați văzut un site web în care textul începe în partea din stânga sus a ferestrei?
Nu am văzut asta, deoarece dezvoltatorii web folosesc întotdeauna indentări externe și interne pentru a face textul cât mai ușor de citit. Umplutura internă este specificată folosind proprietatea padding, în care pot fi enumerate 4 valori deodată, separate printr-un spațiu, pentru toate marginile, respectiv.
De asemenea, similar cu marginea, puteți adăuga numele părții și puteți seta distanța doar pentru aceasta. De exemplu, top padding poate fi scris folosind padding-top . În general, proprietatea de umplutură funcționează exact la fel ca proprietatea marjă.
De exemplu, puteți da această bucată de cod:
Bloc (Latime: 200px; Umplutura: 20px; )
Care crezi că va fi lățimea reală a elementului nostru? Aici puteți vedea că este de 200 de pixeli, dar căptușelele adaugă încă 20 pe fiecare parte, pentru un total de 240 de pixeli. Luați în considerare acest lucru atunci când proiectați.
Aș dori, de asemenea, să remarc că umplutura este setată în mod normal numai elemente de bloc, este mai bine să nu-l dați cu litere mici. Marja funcționează bine cu orice element.
Indentare într-un document html 
"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."
O resursă web este evaluată de utilizatori în funcție de atractivitatea sa vizuală. Prin urmare, chiar și un text util din punct de vedere informațional poate să nu fie citit din cauza faptului că este prost conceput. Concluzie - trebuie să abordați cu atenție și atenție nu numai conținutul semantic al paginilor site-ului, ci și reprezentare vizuala. Apariția tehnologiei CSS a extins posibilitățile de a crea articole atractive. Una dintre proprietățile concepute pentru a face scrisul mai ușor de citit este indentarea textului CSS.
Margini și umplutură: care este diferența?Înainte de a începe formatarea textului, ar trebui să înțelegeți ce sunt marginile și indentările. În ciuda faptului că aceste elemente de marcare în unele cazuri arată la fel pentru utilizator, există diferențe fundamentale între ele:
- câmpul este specificat de proprietate căptușeală, liniuță - marginea;
- marja este determinată de decalajul dintre conținut și marginea blocului, indentarea - dintre marginile blocurilor adiacente;
- marginile pot fi luate în considerare sau nu în dimensiunile elementului (lățime și înălțime).
Deci, pentru a seta indentarea orizontală sau verticală a textului CSS, utilizați constructul marginea. Această proprietate se aplică etichetei definirea paragrafului documentului. În chiar caz simplu este scris ca:
marja: 12px.
Această linie înseamnă că în jurul blocului de text (sau a oricărui alt bloc) va exista o indentație de 12 pixeli pe toate părțile. Pentru a mări intervalul, de exemplu, de trei ori, scrieți:
marja: 36px.
Dar dacă intervalul dintre blocuri ar trebui să fie diferit pe fiecare parte? Dezvoltatorii de pagini web folosesc mai multe forme de înregistrare:
În primul exemplu, 11 pixeli vor fi indentați de la marginile de jos și de sus ale blocului și 22 de pixeli pe părțile laterale ale blocului. Conform celei de-a doua forme de înregistrare, vor exista 11 pixeli între marginea superioară a blocului și conținut, 33 pixeli între partea de jos și 22 pixeli pe părțile laterale. În al treilea caz, umplutura va fi de 11 pixeli în partea de sus, 22 pixeli în dreapta, 33 pixeli în partea de jos și 44 pixeli în stânga.
De asemenea, este posibil să înregistrați distanța până la limita blocului pe o singură parte: margine-sus, margine-jos, margine-stânga, margine-dreapta. Prin traducerea numelor proprietăților în rusă, este ușor să le ghiciți scopul. De exemplu, următoarea intrare spune că marginea dreaptă va fi de 22 de pixeli:
margine-dreapta: 22px.
Pentru celelalte părți, distanțele din jurul blocului sunt presupuse a fi egale cu valoarea elementului părinte.
Proprietate marginea are o caracteristică de care un dezvoltator trebuie să țină cont atunci când folosește indentarea verticală a textului CSS. Intervalele elementelor adiacente nu sunt însumate, ci suprapuse unele peste altele. De exemplu, lăsați unul dintre blocuri să aibă margine-jos: 15px, și blocul adiacent acestuia de mai jos margine-sus: 35px. Aritmetica școlară și bunul simț sugerează că spațiul total dintre ele va fi de 50 de pixeli. În practică, acesta nu este cazul. Bloc cu o valoare mare de proprietate margineaîși va „absorbi” vecinul. Ca urmare, distanța dintre elemente va fi de 35 de pixeli.
Întocmirea unui document în editor de text, utilizatorii preferă să specifice fiecare paragraf nou folosind o linie „roșie”. Cu ajutorul CSS, este ușor să indentați textul din stânga - construcția este folosită text-indentare. Este scris astfel:
indentare text: 11px.
Adică, prima linie a paragrafului va fi deplasată față de marginea din stânga cu 11 pixeli. Pentru a face textul de pe o pagină web mai mult ca un document în editor, ar trebui să setați suplimentar, adică să scrieți:
text-indent: 11px;
text-align: justifica.
Pe lângă pixeli, atunci când descrieți marcajele, este permisă utilizarea altor unități - inci, puncte, procente. Lăsați blocul să aibă o umplutură de text CSS de 10%. Cu o lățime a blocului de 500 de pixeli, linia roșie va fi de 50 de pixeli (10% din 500).
Pentru a acestei proprietati valoarea poate fi setată moşteni. Această intrare spune că blocul folosește o proprietate similară a blocului părinte.
text-indent: moștenire.
În mod surprinzător, poate lua și valori negative! În acest caz, se formează așa-numitele protuberanțe, adică textul principal rămâne pe loc, iar prima linie este deplasată la stânga cu 22 de pixeli:
indentare text: -22px.
Pentru a preveni trecerea literelor dincolo de marginea stângă a browserului, în plus față de text-indentare trebuie să utilizați construcția pentru a seta câmpul:
umplutură-stânga: 22px.
Sunt revizuite principalele proprietăți ale CSS. Iar practica va ajuta la consolidarea lor. Iată câteva sfaturi finale pentru a aplica ceea ce ați învățat la dezvoltarea site-ului dvs.:
- linia roșie și indentarea textului sunt concepte diferite și sunt folosite diferite proprietăți pentru a le indica;
- Pentru indentări verticale, regulile matematicii nu se aplică - intervalele se suprapun, elementul cu valoarea mai mare „câștigă”;
- indentarea negativă a paragrafului este folosită pentru a indica primul rând al unui paragraf folosind o imagine.
Buna ziua! Inițial am vrut să împart acest articol în 4 mici, dar apoi m-am gândit la el. Pentru ce? La urma urmei, este mai convenabil atunci când astfel de informații sunt colectate într-un singur material.
Așa că astăzi vom învăța cum să facem indentare CSS în stânga și în toate celelalte părți - dreapta, sus și jos. Ele pot fi realizate pentru imagini și texte. Ele vin în două tipuri:
- Extern;
- Intern.
Pentru prima, proprietatea cheie este marginea, pentru cea din urmă – padding. Pentru claritate, ți-am făcut un mic exemplu. Pentru a face o distincție vizuală convenabilă între spațiul interior și cel exterior, am adăugat o masă vizibilă. Să vedem ce s-a întâmplat?
MarjeleScriindu-le într-un fișier de stil CSS, puteți seta orientarea blocului de informații pe pagină. De exemplu, îl voi muta la stânga și în jos. Permiteți-mi să vă demonstrez imediat cum va arăta.
În general, puteți utiliza următoarele opțiuni pentru a seta indentări.
Stânga (marja-stânga).
Pe dreapta (marja-dreapta).
De sus (margine-sus).
De jos (marja-de jos).
Acum vă voi arăta o altă nuanță grozavă.
După cum puteți vedea, puteți utiliza una dintre opțiuni - efectul este același. Numai în al doilea caz codul se dovedește a fi mai compact. De asemenea, rețineți că indentațiile sunt setate în sensul acelor de ceasornic. Totul începe de sus și se termină în stânga.
CaptusealaProcedura este similară aici. Abia acum voi adăuga noi proprietăți nu pentru întregul tabel, ci pentru conținutul coloanelor.
Să vedem ce a ieșit din asta.
Prin analogie cu indentareîn CSS, cele externe pot fi scrise în cod prescurtat sau pentru laturi separat.
Acestea au fost punctele principale. În cele din urmă, vă voi arăta cum altfel puteți face ceva mai ușor.
Indentare la nivelul etichetei selectateÎn cazurile văzute mai sus, acestea sunt setate pentru text și imagini în același timp. De fapt, puteți seta distanța față de elemente la nivelul unei anumite etichete. Îți voi arăta cum funcționează. Anulez ultimele modificări și specific codul special în fișierul de stil.
Să aruncăm o privire la ce s-a întâmplat după salvarea modificărilor.
Imaginea a rămas pe loc, doar textul inclus în . Manipulari similare pot fi aplicate altor blocuri, de exemplu, tr, span.
La fel de Informații suplimentare Vă sugerez să citiți publicația despre sarcină. Sunt, de asemenea, suficient descrise moduri interesante. Poate fi util pentru formarea unei linii roșii în text sau pentru a efectua alte acțiuni.
În plus, vă puteți abona la un buletin informativ gratuit prin e-mail. Există un formular special pentru abonarea la blog. Ne vedem mai târziu.
În timp ce citiți orice carte, ziar, revistă sau orice text normal în general, ați întâlnit multe paragrafe, iar primul rând al fiecăruia conține o mică indentație. În acest articol voi arăta cea mai buna varianta stabilirea indentărilor de paragraf folosind CSS.
Desigur, orice număr de spații pot fi inserate folosind , selectând astfel indentarea necesară, dar probabil înțelegeți că această metodă este, ca să spunem ușor, incomodă. Și soluția la această problemă este foarte simplă.
Ar trebui să știți deja că în HTML, un paragraf este creat folosind . Astfel, fiecare paragraf ar trebui să fie în propria etichetă. Și pentru a indenta primul rând al fiecărui paragraf, trebuie doar să conectați următorul cod CSS:
P(
text-indent: 10px;
}
ÎN în acest exemplu am făcut o indentare de 10 pixeli. Vă puteți juca cu această valoare pentru a găsi cea mai bună pentru site-ul dvs.
În acest mod simplu puteți seta o indentare pentru primele rânduri ale oricărui paragraf din textul de pe site.
Dacă aveți întrebări sau doriți să comentați acest articol, vă puteți lăsa comentariul în partea de jos a paginii.
Comentarii (9): 
31.05.2013 13:10:03
Bună Mihail, ajută-mă să rezolv problema cu următorul cod CSS: .bam ( chenar: 1px negru solid; chenar-radius: 8px; margin-bottom: 4%; text-align: left; width: 84%; ) .bam .author (culoare fundal: alb; chenar-jos: 1px negru solid; chenar-sus-dreapta-rază: 8px; chenar-sus-stânga-rază: 8px; font-weight: bold; padding:4px; ) .bam .text (culoare de fundal: WhiteSmoke; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding:4px; ) Este necesar ca textul din interiorul „.bam .text” să se împacheteze într-un altul linie dacă nu se încadrează pe o linie. Dar din anumite motive nu este transferat, ci se târăște afară din bloc. Ajută la rezolvarea acestei probleme.
Răspuns
06.06.2013 22:42:20
Bună Mihail, se întâmplă să știi cum să găsești o cale de ieșire din următoarea situație: există un bloc, iar în interiorul lui există un alt bloc, iar în acest bloc, ceea ce este în interior este text scris (lungimea textului este necunoscut dinainte). Deci, cum puteți face ca înălțimea blocului părinte să depindă de înălțimea blocului din interiorul acestuia (cu text)? Din anumite motive, se dovedește că înălțimea blocului părinte este mai mică decât înălțimea celui intern.
Răspuns
Admin 06.06.2013 23:32:40
Toate blocuri externe se intind in functie de marimea blocurilor interne. Nu este nevoie să faceți acest lucru, ar trebui să fie deja acolo implicit.
Răspuns
07.06.2013 11:11:09
și te uiți: http://progbase.ru/about.php
Răspuns
Admin 06.07.2013 21:54:37
Trebuie folosit - plasați acest bloc locuri diferite si vezi ce se schimba. Odată ce totul este în ordine, lăsați-l acolo.
Răspuns
13.09.2013 21:39:34
Buna ziua! Vă rugăm să mă ajutați să fac liniuțe și alte stiluri de text în această fereastră de indicație cu mouse-ul. Ceva nu funcționează, asta este tot. .podskazka( culoare de fundal: #FF6600; padding:0px; chenar:3px solid #66FFFF; poziție:absolut; margine: 3px; lățime: 200px; înălțime minimă: 50px; înălțime maximă: automat; spațiu alb: normal ; border-bottom: 1px întreruptă #000080; funcția podskazka() ( this.show = function(text,x,y) ( var div = document.createElement("div"); div.className = "podskazka"; div . id = "metka"; .hide = function() ( var metka = document.getElementById("metka"); metka.parentNode.removeChild(metka); ) var vsplil = new podskazka(); hint Sugestie și mai departe în text
