Proprietatea CSS display
Proprietatea display este una dintre cele mai importante proprietăți pentru controlul aspectului paginii. Stabilește dacă un element este tratat ca un element bloc sau inline.
Fiecare element are o valoare display implicită bazată pe tipul său, de obicei block sau inline. Proprietatea display vă permite să schimbați acest comportament implicit.
Elemente la Nivel de Bloc
Un element la nivel de bloc începe întotdeauna pe o linie nouă și ocupă întreaga lățime disponibilă.
<div> este un element la nivel de bloc. Alte exemple includ <h1>–<h6>, <p>, <form>, <header>, <footer> și <section>.
Elemente Inline
Un element inline nu începe pe o linie nouă și ocupă doar atâta lățime cât are nevoie.
Exemple de elemente inline includ <span>, <a> și <img>.
Valori Display
Proprietatea display are multe valori. Cele mai comune sunt:
inline— afișează elementul ca element inline.block— afișează elementul ca element bloc.contents— face ca containerul să dispară, astfel încât copiii săi urcă un nivel în DOM.flex— afișează elementul ca un container flex la nivel de bloc.grid— afișează elementul ca un container grid la nivel de bloc.inline-block— formatează elementul ca inline, dar permite setarea înălțimii, lățimii, padding-ului și marginii.none— ascunde complet elementul, astfel încât nu ocupă spațiu.
Suprascrierea Valorii Display Implicite
Proprietatea display schimbă comportamentul implicit al unui element. Schimbarea unui element inline în bloc, sau invers, poate ajuta pagina să arate așa cum doriți, respectând în același timp standardele web.
Notă: Setarea display schimbă doar modul în care este afișat elementul, nu tipul de element. Astfel, un element inline cu display: block tot nu poate conține alte elemente bloc.
Span ca bloc
Elementele inline <span> sunt afișate ca elemente bloc, fiecare pe propria linie.
<style> intern, setați span { display: block; }. Adăugați câteva elemente <span> astfel încât fiecare să apară pe propria linie, în loc de inline.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>A span element displayed as a block.</span>
<span>Another span element on its own line.</span>
<span>A third span element on its own line.</span>
</body>
</html>
Legătură ca bloc
Elementele inline <a> sunt afișate ca elemente bloc, fiecare pe propria linie.
<style> intern, setați a { display: block; }. Adăugați câteva legături <a> astfel încât fiecare să apară pe propria linie.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a {
display: block;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">Link one</a>
<a href="https://prompt-cookbook.com">Link two</a>
<a href="https://prompt-cookbook.com">Link three</a>
</body>
</html>
Exemplu cu Mai Multe Valori Display
Puteți aplica mai multe valori display diferite elementelor.
Exemplu
Șase paragrafe folosesc none, inline, block, inline-block, flex și grid.
<style> intern, creați șase clase de paragraf: ex1 none, ex2 inline, ex3 block, ex4 inline-block, ex5 flex, ex6 grid. Adăugați un paragraf etichetat pentru fiecare, astfel încât diferitele comportamente de afișare să fie vizibile (cel „none” va fi ascuns).
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
p.ex5 {display: flex;}
p.ex6 {display: grid;}
</style>
</head>
<body>
<p class="ex1">display: none (this paragraph is hidden).</p>
<p class="ex2">display: inline.</p>
<p class="ex3">display: block.</p>
<p class="ex4">display: inline-block.</p>
<p class="ex5">display: flex.</p>
<p class="ex6">display: grid.</p>
</body>
</html>