CSSда display хусусияти билан ишлаш

Сиз билдингизки, барча теглар маълум блок моделига тегишли. Истаган холда, аммо, display хусусияти ёрдамида моделни ўзгартириш мумкин. Ушбу хусусиятнинг block қиймати ёрдамида элементни блокли қилиш мумкин, inline қиймати ёрдамида эса - сатрли.

Келинг, span теглар блок элементлар каби туришини таъминлаймиз:

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

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

Энди эса, div теглар сатр элементлар каби туришини таъминлаймиз:

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

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

HTML кодингизда бир неча абзац бор бўлсин. Уларнинг сатр элементлар каби туришини таъминланг.

HTML кодингизда бир неча ҳавота бор бўлсин. Уларнинг блок элементлар каби туришини таъминланг. Уларга чегара, эни ва бўйни беринг.