Lucrul cu proprietatea display în CSS

Știți deja că toate tag-urile aparțin unui anumit model de bloc. Cu toate acestea, dacă se dorește, se poate schimba modelul folosind proprietatea display. Folosind valoarea block a acestei proprietăți un element poate fi făcut bloc, iar folosind valoarea inline - inline.

Hai să facem ca tag-urile span să se comporte ca elemente bloc:

html<span>text</span>
<span>text</span>
<span>text</span>

cssspan {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-bottom: 20px;
}

Результат:

Și acum să facem ca tag-urile div să se comporte ca elemente inline:

html<div>text</div>
<div>text</div>
<div>text</div>

cssdiv {
  display: inline;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат: