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

თქვენ უკვე იცით, რომ ყველა თეგი განეკუთვნება გარკვეულ ბლოკურ მოდელს. სურვილის შემთხვევაში, თუმცა, შესაძლებელია მოდელის შეცვლა display თვისების მეშვეობით. ამ თვისების block მნიშვნელობის საშუალებით ელემენტი შესაძლებელია გავხადოთ ბლოკური, ხოლო inline მნიშვნელობის საშუალებით - სტრიქონული.

მოდით გავხადოთ, რომ span თეგები იქცეოდნენ როგორც ბლოკური ელემენტები:

<span>ტექსტი</span>
<span>ტექსტი</span>
<span>ტექსტი</span>

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

ახლა კი გავხადოთ, რომ div თეგები იქცეოდნენ როგორც სტრიქონული:

<div>ტექსტი</div>
<div>ტექსტი</div>
<div>ტექსტი</div>

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

დავუშვათ თქვენს HTML კოდში გაქვთ რამდენიმე აბზაცი. გახადეთ ისინი ისე, რომ იქცეოდნენ როგორც სტრიქონული ელემენტები.

დავუშვათ თქვენს HTML კოდში გაქვთ რამდენიმე ბმული. გახადეთ ისინი ისე, რომ იქცეოდნენ როგორც ბლოკური ელემენტები. მიანიჭეთ მათ საზღვარი, სიგანე და სიმაღლე.