Display īpašības darbs CSS

Jūs jau zināt, ka visi tagi pieder noteiktai bloku modelim. Tomēr, ja vēlas, var mainīt modeli, izmantojot īpašību display. Izmantojot šīs īpašības vērtību block, elementu var padarīt par bloka elementu, bet izmantojot vērtību inline - par inline elementu.

Padarīsim, lai span tagi uzvestos kā bloka elementi:

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

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

Un tagad padarīsim, lai div tagi uzvestos kā inline elementi:

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

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

Pieņemsim, ka jūsu HTML kodā ir vairāki rindkopas. Iestatiet tos tā, lai tie uzvestos kā inline elementi.

Pieņemsim, ka jūsu HTML kodā ir vairākas saites. Iestatiet tās tā, lai tās uzvestos kā bloka elementi. Piešķiriet tām apmali, platumu un augstumu.