CSS-ში display თვისებით მუშაობა

თქვენ უკვე იცით, რომ ყველა თეგი განეკუთვნება გარკვეულ ბლოკურ მოდელს. სურვილის შემთხვევაში, თუმცა, შესაძლებელია მოდელის შეცვლა 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;
}

Результат: