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

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

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

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

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

Результат:

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

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

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

Результат: