dexblog.ro
CSS Toate proprietățile CSS

display (block, inline, inline-block, none) în CSS

Display și Poziționare CSS1+

Stabilește tipul de cutie al elementului în fluxul paginii sau îl ascunde complet din document.

Sintaxă CSS 
display: block;
display: inline;
display: inline-block;
display: none;
display: flex; /* vezi secțiunea Flexbox */
display: grid; /* vezi secțiunea Grid */

Ce face display (block, inline, inline-block, none)

Proprietatea display dictează modul în care elementul se comportă în raport cu vecinii săi:

• block: începe întotdeauna pe un rând nou și ocupă toată lățimea disponibilă (ex. <div>, <p>). Acceptă width, height, margin și padding pe toate laturile.
• inline: curge în linie cu textul, ocupând doar spațiul strict necesar (ex. <span>, <a>). Ignoră width, height și marginile verticale.
• inline-block: cel mai bun din ambele lumi: stă în linie pe același rând cu alte elemente, dar acceptă width, height și padding.
• none: elimină complet elementul din randare (nu ocupă niciun spațiu în pagină).

Valori uzuale

Valoare Descriere
block Element de tip bloc: linie nouă, lățime maximă.
inline Element în linie: curge cu textul, ignoră width/height.
inline-block Rămâne în linie, dar acceptă dimensiuni lățime/înălțime.
none Ascunde elementul complet; spațiul său este eliberat.
flex / grid Activează modulele moderne de layout Flexbox sau Grid.

Exemple

Exemplul 1: Transformarea linkurilor în butoane prin inline-block

inline-block permite linkului să primească lățime, înălțime și padding vertical.

a.buton {
  display: inline-block;
  padding: 10px 20px;
  background-color: #2563eb;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
}

Efect vizual în browser

Linkul devine un buton dreptunghiular solid cu padding complet, stând frumos aliniat în rând cu alte butoane.

Greșeli frecvente

  • Încercarea de a seta width sau height pe un element inline (cum ar fi un ) fără a schimba display pe inline-block sau block (dimensiunile vor fi complet ignorate).
  • Confundarea display: none (care eliberează complet spațiul din pagină) cu visibility: hidden (care ascunde elementul, dar lasă un gol invizibil de aceeași mărime).

Comenzi înrudite

  • visibility: Ascunde un element din vedere, păstrând însă golul fizic pe care acesta îl ocupă în pagină.
  • opacity: Setează gradul de transparență al unui element întreg, inclusiv al tuturor copiilor săi.
  • width și height (min/max): Controlează dimensiunile orizontale și verticale ale unui element, inclusiv limitele minime și maxime permise.