CSS හි display ගුණාංගය සමඟ වැඩ කිරීම

ඔබ දැනටමත් දන්නා පරිදි සියලුම ටැග් නිශ්චිත block model එකකට අයත් වේ. කෙසේ වෙතත්, අවශ්‍ය නම්, display ගුණාංගය භාවිතයෙන් model එක වෙනස් කළ හැක. මෙම ගුණාංගයේ block අගය භාවිතයෙන් අංගයක් block අංගයක් බවට පත් කළ හැකි අතර, inline අගය භාවිතයෙන් - inline අංගයක් බවට පත් කළ හැක.

දැන් අපි span ටැග් block අංග මෙන් හැසිරෙන පරිදි කරමු:

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

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

දැන් අපි div ටැග් inline අංග මෙන් හැසිරෙන පරිදි කරමු:

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

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

ඔබගේ HTML කේතයේ ඡේද කිහිපයක් ඇතැයි සිතමු. ඒවා inline අංග මෙන් හැසිරෙන පරිදි සකසන්න.

ඔබගේ HTML කේතයේ සබැඳි කිහිපයක් ඇතැයි සිතමු. ඒවා block අංග මෙන් හැසිරෙන පරිදි සකසන්න. ඒවාට මායිමක්, පළල සහ උස යොදන්න.