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

Шумо аллакай медонед, ки ҳамаи тегҳо ба модели муайяни блокӣ тааллуқ доранд. Агар хоҳед, аммо, шумо метавонед моделро бо ёрии хосияти 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 шумо чанд истинод дошта бошед. Ҳамин тавр кунед, ки онҳо чунон ки унсурҳои блоқӣ рафтор кунанд. Ба онҳо ҳад, паҳнӣ ва баландӣ муқаррар кунед.