Există două tipuri de elemente în HTML - elemente bloc și elemente inline. Mai jos veți afla caracteristicile acestor elemente și diferența dintre ele, precum și modalități de a le controla prin regulile CSS.
Elemente de bloc
Elementele bloc sunt baza care este utilizată pentru aranjarea paginilor web. Un astfel de element este un dreptunghi care, implicit, ocupă toată lățimea disponibilă a paginii (dacă nu se specifică altfel în CSS), iar lungimea elementului depinde de conținutul acestuia. Un astfel de element începe întotdeauna cu linie nouă, adică situat sub elementul anterior. Un element de bloc poate conține alt bloc și elemente inline.
Exemple de elemente bloc:
,
- ,
- ,
etc.
Elemente în linie
Spre deosebire de un element bloc, un element inline nu se înfășoară într-o linie nouă, ci este plasat pe aceeași linie ca și elementul anterior. Astfel de elemente, de regulă, sunt situate în interiorul elementelor bloc, iar lățimea lor depinde numai de conținut și setări css. O altă diferență între un element inline și un element bloc este că poate conține doar conținut și alte elemente inline. Elementele bloc nu pot fi imbricate în elemente inline.
Exemple de elemente inline: , , , , etc.
Notă:În HTML5, ordinea în care sunt imbricate etichetele nu contează. Elementele nu mai sunt doar împărțite în bloc și inline, ci sunt grupate în funcție de sens și scop, reprezentând categorii de conținut.
Afișare proprietăți CSS: schimbați tipul elementului
Cu ajutorul extrem proprietate utilă afișați în CSS, puteți face ca un element bloc să arate ca un element inline și invers. Pentru ca un element bloc să se comporte ca un element inline (adică nu se traduce într-o linie nouă), trebuie să scrieți o regulă pentru el:
Display: inline;
Dacă doriți să afișați un element în linie ca element bloc (astfel încât să apară o întrerupere de linie înainte și după element), scrieți următoarele:
display:bloc;
Acțiune (display:inline) și (display:block)
De asemenea, puteți face un „hibrid” - un element bloc cu același comportament ca un element inline. În acest caz, tot conținutul unor astfel de elemente de bloc va fi afișat ca de obicei, dar blocurile se vor comporta ca elemente inline, aliniându-se pe o linie una după alta și înfășurându-se pe o linie nouă numai atunci când este necesar. Marja de colaps nu are efect în astfel de cazuri. Pentru a face un element block-inline, scrieți:
Afișare: bloc inline
Acțiune (afișare:inline-block)
Mai departe în tutorial: proprietatea de frontieră CSS. Veți învăța cum să adăugați chenare elementelor paginii web și ce setări le puteți aplica folosind foile de stil în cascadă.
Elementele HTML sunt împărțite în elemente inline și bloc în funcție de modul în care sunt afișate pe o pagină web.
Elemente inline (inline)
Elementele în linie sunt concepute pentru a efectua anumite acțiuni asupra textului, de exemplu: întrerupere de linie, selectare a textului cu caractere cursive, selectare logică a unui text și aplicarea stilurilor acestuia cu folosind CSS etc. În funcție de scopul elementului inline, o bucată de text este plasată între etichetele de deschidere și de închidere sau o etichetă este folosită oriunde în text, de exemplu, pentru a întrerupe o linie.
De exemplu:
Puteți utiliza un element inline pentru a sublinia textul care atrage atenția vizitatorilor site-ului folosind stil îndrăzneț.
Un element inline are o lățime care este egală cu lățimea conținutului său. Elementele inline nu pot conține elemente bloc în interiorul lor.
Exemple de elemente inline: , ,