Бо хосияти display дар CSS кор кардан

Шумо аллакай медонед, ки ҳамаи тегҳо ба модели муайяни блокӣ тааллуқ доранд. Агар хоҳед, аммо, шумо метавонед моделро бо ёрии хосияти display иваз кунед. Бо ёрии қимати block ин хосиятро унсурро метавон ба блокӣ табдил дод, ва бо ёрии қимати inline - ба сатрии.

Биёед ҳамин тавр кунем, ки тегҳои span чунон ки унсурҳои блоқӣ рафтор кунанд:

html<span>матн</span>
<span>матн</span>
<span>матн</span>

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

Результат:

Ва акнун биёед ҳамин тавр кунем, ки тегҳои div чунон ки унсурҳои сатрӣ рафтор кунанд:

html<div>матн</div>
<div>матн</div>
<div>матн</div>

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

Результат: