CSS में display प्रॉपर्टी के साथ काम करना

आप पहले से ही जानते हैं कि सभी टैग एक निश्चित ब्लॉक मॉडल से संबंधित होते हैं। हालाँकि, इच्छा होने पर, display प्रॉपर्टी की मदद से मॉडल को बदला जा सकता है। इस प्रॉपर्टी के मान block की मदद से एलिमेंट को ब्लॉक-लेवल बनाया जा सकता है, और मान inline की मदद से - इनलाइन।

आइए span टैग्स को ऐसे बनाएं कि वे ब्लॉक एलिमेंट्स की तरह व्यवहार करें:

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 टैग्स को ऐसे बनाएं कि वे इनलाइन एलिमेंट्स की तरह व्यवहार करें:

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

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

Результат: